1. 想用AI把PSD转成HTML，先搞清楚这件事到底难在哪
先说结论：现在的AI确实能把PSD转成HTML，但如果你拿一个设计得乱七八糟的PSD直接丢给它，出来的代码大概率只能“远看像、近看散”。我见过不少前端新手和独立开发者在标题里搜这个问题，以为AI能一键替代前端工程师，实际用下来发现，AI更像个“搭模板的实习生”，需要你给它铺好路、定好规矩，才能产出能用的东西。
先说清楚这个工作到底在干什么。PSD转HTML，本质上是从设计稿到网页结构的映射：把Photoshop里的图层、切片、文字、样式信息，翻译成HTML结构、CSS样式和必要的JavaScript交互。过去人工完成这件事，前端工程师要肉眼对照设计稿切图、量尺寸、写布局，一个稍复杂的首页就要一两天。AI介入之后，它能把图片识别、布局分析、代码生成这串流程自动化掉一大截，但前提是——你的源文件、你的预期、你的验收标准得先对齐。
适合谁来读这篇内容？我觉得有三类人：一类是前端开发，想用AI把重复性切版工作快速干掉；一类是设计师，想自己生成HTML给开发做参照；还有一类是独立开发者，想省掉外包成本，自己做产品落地页。这篇文章不吹嘘某种工具，所有思路都以“实际能用、能上线”为标准。
2. 选路子：AI转PSD的三种主流路径，各自适用什么场景
2.1 在线一站式转换平台：省心，但对源文件要求极高
市面上有一批工具，号称“上传PSD直接出HTML”。流程基本是：上传文件，选择规格，几十秒后得到压缩包，里面放着index.html、css文件夹、image文件夹。我试下来最直观的感受是：对于结构规整、命名清晰、图层不乱的PSD，这种工具能给你一个七八十分的基础版本；但你要是把一堆智能对象、混合模式、剪贴蒙版堆在一起，它给你的代码会带大量切碎的图片、绝对定位和无语义的div，后期调整成本高到让你宁愿重写。
这类方案适合什么场景？适合快速验证设计概念，或者做内部原型给团队看，而不是直接当生产代码。它的核心原理其实是固定的解析流程：工具先读取PSD的图层树和坐标信息，再按照预设模板生成布局代码。所以它不理解你的设计意图，只会机械地按坐标摆放。用它之前，你得先把PSD里能合并的图层合并、能栅格化的样式栅格化，把所有命理统一成英文或拼音，否则中文名和特殊字符会让它抽风。
2.2 借助设计稿切图工具+AI代码助手：目前最稳的组合
我个人现在用得最多的是这条路线：先用PS插件或者设计稿导出工具，把PSD里的图层切成干净的图片资源，拿到图片切图目录和尺寸信息后，再把这些信息连同设计稿截图一起喂给AI代码助手，让它写HTML和CSS。
这个方案的逻辑是：让AI负责它擅长的事（写结构、写样式、做布局推理），让工具负责它们擅长的事（精确切片、导出资源）。这比直接让AI看PSD文件本身靠谱得多——AI读一个二进制PSD文件的能力并没有想象中那么强，除非你先把PSD转成它更容易理解的格式（比如导出的PNG、SVG、JSON标注图）。
具体操作上，我会把设计稿关键区块截图、切图资源的命名列表、以及设计规范一起放进提示词里，要求AI按语义化标签重构，而不是机械地按坐标写死。这样生成的代码至少语义清晰，响应式调整也有了基础。
2.3 直接用大模型看图写代码：门槛最低，但能力边界要清楚
还有一条路更容易想到：直接把PSD导出成图片，然后丢给多模态大模型，说“照着这个写HTML和CSS”。现代的多模态模型理解图像布局的能力相当强，基本结构、配色、字体大小它都能复现。
但这里有个巨大风险：对于图片中的装饰性细节、特殊字体、渐变纹理，AI会靠“猜”去实现。猜对了算你运气好，猜错了它会以近似的方式重写你的视觉设计。它不会告诉你“这里我不敢确定所以我简化了”，它只会默默简化。所以这条路适合那些视觉语言清晰、风格现代、依赖标准CSS能力就能实现的设计稿，不太适合那些依赖大量质感、合成效果和特殊滤镜的设计。
我的建议是：如果你手里是一个扁平化、栅格化明显、视觉层次简单的设计稿，直接用大模型看图写代码是完全OK的。但如果你的设计稿里有复杂的光影、多种混合模式、细腻的渐变投影，那就先把视觉资源切好，再让AI做布局和样式还原，这样才能保住原设计的质感。
3. 实操前必须完成的PSD源文件预处理
很多人的第一步就走错了：他们直接拿原始PSD丢进各种工具，然后抱怨效果差。实际上，给AI喂源文件就像给厨师递食材——你不会把带泥的菜整根丢过去，而是得洗好切好码齐。同样，一个好的预处理步骤，能直接决定AI输出的下限。
3.1 图层命名的英文规范化
这个看似最基本的动作，绝大多数人反而没做到。图层里出现中文、特殊符号、空格、重复命名时，AI工具解析出来的CSS类名和图片文件名就会乱七八糟。比如一个图层叫“按钮背景（带阴影）二次修改”，工具可能输出一个.bj-jpg或者乱码命名的文件，后面维护的人根本不知道那是什么。
所以，我把所有需要切为独立资源的图层统一改成小写英文加连字符：比如btn-primary-bg、hero-illustration、card-shadow-layer。没有业务语义的合并图层直接删掉或分组。这么处理之后，AI生成的图片引用和CSS类名会非常干净，后续维护成本直线下降。
3.2 合并扁平化视觉图层
PSD里最坑AI的一类东西，是那些视觉上完整、但内部由一堆图层叠加出来的效果。比如一个按钮，可能是一个圆角矩形图层、一个内阴影图层、一个高光图层、一个文字图层叠出来的，导出代码时工具会把这些杂乱图层拆得稀碎。更好的办法是：对每个视觉完整元素，选中所有相关图层后合并成一个智能对象或栅格化图层，这样AI和工具看到的是一张完整的图，而不是一堆碎零件。
这里要区分一个概念：有些图层需要保留结构（比如文本图层，你想让它转换成真实的HTML文字），有些只需要保留视觉结果（比如复杂质感背景）。文本图层你如果想保留为文本，就不要栅格化；背景装饰层能栅格化就栅格化。
3.3 建立设计规格清单
PSD文件本身并不会告诉AI：这个页面在哪个宽度断点变化、点击按钮有没有交互状态、导航栏是否置顶、移动端是否隐藏某个区块。你需要在提示词里把这些信息补齐。
我在实操中会先做一份规格清单，包括：主色值、辅助色值、字体栈、字号层级、间距基准、圆角半径、断点选择。这份清单会写成一个简单的文本文件，喂给AI时和设计稿截图一并放进去。这样生成的代码就不会出现颜色靠猜、字体乱选、间距随缘的问题。
4. 完整实操一条走通的流程：从PSD到可跑起来的HTML
现在进入核心部分。我用一个抽象出来的记忆中的项目案例来讲——某个跨平台系统的落地页，PSD包含导航、Hero区、特性卡片区、报价表、页脚五个主要区块。下面是我实际跑下来最顺的一条路径。
4.1 第一步：导出设计稿高清截图
先把PSD里的每一屏区域，按设计尺寸导出成高清JPEG或PNG。导出的图像建议按section-hero.png、section-features.png、section-pricing.png这样的命名分别给几个区块单独出图，再导一张完整的首页长图。
这组图片的用途有两个：一是喂给多模态AI作为布局参考；二是你自己对照生成结果做视觉走查。导出时选择“切图工具导出的PNG”，保持2倍图尺寸，这样AI对间距、缩进、层级关系看得更清楚。
4.2 第二步：切出真正需要的图片资源
AI能帮你写HTML和CSS，但它不能凭空生成你设计稿里那些独一无二的配图、插画和Logo。所以你需要把PSD里的位图元素单独抠出来，放到项目images/目录下。
我的习惯是：凡是要作为<img>标签引用的内容，都用PS刀片工具切好；纯装饰性的背景、渐变、光影部分，尽量用CSS实现，而不是切图。这样生成出来的页面加载体积小，响应式适配也更容易。要是你有SVG文件，更好，AI非常擅长处理SVG。
4.3 第三步：写一份“喂给AI”的上下文包
这一步决定了最后代码质量的50%。我不是只丢一张截图就让AI自由发挥，而是给它一份包含四块信息的“上下文包”：
- 设计稿截图或切图预览；
- 设计规格清单（颜色、字体、间距）；
- 页面区块功能说明（比如“导航栏在移动端需要切换为汉堡菜单”或“报价表中的推荐项需要高亮”）；
- 技术约束（比如“不要使用任何外部UI框架，纯手写CSS；不要引入大型JS库；图片路径以
./images/开头”）。
把这些内容放在系统提示词里，AI生成的代码会明显带着“可上线”的味道，而不是玩具弹窗项目。这里补充一句：如果你用的是本地代码编辑器里集成的AI助手，同样适用这套准则，不要默认它知道你的项目结构。
4.4 第四步：分区块生成，而不是一次生成整页
很多人喜欢让AI一口气生成一个整页，结果一长串代码里错误密集，改起来又无从下手。我强烈建议按区块拆开生成：先让AI生成导航栏的HTML和CSS；确认没问题后，再生成Hero区；然后是特性卡片、报价表……每生成一个区块，就放进本地项目里预览一次。
这样做的好处，一方面是每个区块的上下文更聚焦，AI不容易“忘记”之前的约束；另一方面，你排查问题时能立刻锁定代码片段，不用在几百行代码里大海捞针。区块全部生成完之后，再把它们拼进同一个页面容器。
4.5 第五步：手动整合结构和状态逻辑
AI生成的区块拼接到一起后，必然会出现一些需要手动处理的地方：通栏背景是否连贯、区块间距是否统一、滚动时导航栏状态如何切换、移动端菜单如何开合。这些“跨区块联动”的逻辑，AI很难一次写好，你得手动调整。
比如我那个案例里的移动端菜单，AI生成的时候只写了静态的汉堡按钮图标，点击事件完全没接上。我补了大概10行JavaScript就解决了。这就是一个真实比例：AI帮你省掉的已经是80%的布局线框时间，剩下20%的交互逻辑和细节微调，必须你自己动手。
5. 生成结果的质量怎么评估：千万别“看着像”就完事
AI转出来的HTML，从浏览器表面上看往往“挺像那么回事”。但真正决定它能不能进入生产环境的，往往是表面看不到的东西。
5.1 结构与语义检查
第一步，打开生成的HTML代码，看它的标签语义：内容区用的是<section>还是<div>，导航用的是<nav>，按钮用的是<button>，标题层级是否合乎逻辑。如果AI把整页都写成一堆<div>，那就不可用，你需要重新提示一遍语义要求，让AI重写。
现在很多AI能看懂你给的截图，但它在输出标签时，默认倾向用稳妥的<div>而不是语义化的<header>/<footer>。这是它“求稳”的性格。所以你必须在提示词里明确要求“使用语义化HTML5标签”，再在生成后人工扫一遍所有可见文本是否被包裹在合适的标签里。
5.2 响应式适配检查
大多数AI生成出来的CSS，会默认以你截图的分辨率宽度为准来写。你把浏览器窗口拖窄，页面很可能出现横向滚动条或者元素重叠。所以，第一件事就是打开开发者工具，在移动端宽度下逐一检查每个区块：
- 图片是否设了
max-width: 100% - 弹性容器是否用了
flex-wrap - 文字是否在窄屏下溢出
我自己的经验是，生成之后我几乎总是要补一整套媒体查询，毕竟AI在某一个断点下写样式时，很难联想别的断点。如果你的设计稿里没有提供移动端样板，那这块就更得靠你了。
5.3 资源路径与清理
最后，检查所有图片资源路径是否正确，并确认没有残留的原设计稿里根本不存在的废图。AI偶尔会“幻觉”出一些背景图URL，而实际images/目录下根本没有这个文件，页面就会在控制台疯狂报404。扫一遍它生成的每一条url()和<img src>，逐条确认文件确实存在。
6. 我实际踩过的坑和总结出的经验
这里专门分享几个我反复遇到的问题，希望能帮你避开同样的弯路。
6.1 图层样式和混合模式最容易翻车
PSD里的投影、内发光、渐变叠加、混合模式，AI几乎无法直接用CSS完美复刻。有一次某个区块卡片底部的“拟物化阴影”，AI用了一个接近但不完全一样的box-shadow值，视觉上差一点点，但仔细看发现阴影范围不同。遇到这类情况，我现在的选择是直接改成更现代的扁平卡片设计，或者把阴影范围清晰的装饰层作为背景图切出来使用，不值得纠结在CSS还原上。
6.2 图片切图命名一旦混乱，后期就是灾难
我看到不少开发者喂给AI一堆名为“图层1副本2”切出的图片，然后生成的HTML里也充满类似的无意义文件名。这个坑我在最开始就吃过，后来强制自己每张切图都写成logo.svg、hero-banner.png这样清晰的名字，输出代码可读性立刻提升一个档次。
6.3 从“能看”到“能上线”的成本，比想象中要高
AI把PSD转成HTML，最乐观的说辞是“几分钟出页面”，但“出页面”和“生产环境可用”之间往往隔着一个你想象不到的工程打磨距离：无障碍访问、SEO元信息、加载性能优化、浏览器兼容修修补补，这些AI基本不会主动帮你做。
所以我的心态是：别指望它一条龙包办，而是要它把最重、最繁琐的“线框翻译”步骤完成，让你把精力放在需要判断和审美的环节上。我在实际使用时，一定会做两件设置上的事：第一，在提示词里要求AI输出的CSS不带任何全局重置库，我自己来控制盒模型；第二，要求AI把每个主要区块的CSS注释写得清晰，方便我后期定位修改。这两条让我后期修补速度大大加快。
最后分享一个小技巧：如果某个区块AI反复生成都不对，或者它总是把自己封闭在一套离谱的布局里，我通常不做大幅修改，而是把当前这个区块的内容描述重新整理，把“不要什么”也明确写出来，再让它单区块重做。与其在一个错误方向上调参，不如重新喂一次上下文，重做的成本通常低得多。
