干前端这些年，接得最多的需求就是“psd转html”。以前这活儿纯靠手工切图，先量尺寸、导切片，再一个像素一个像素地对着写样式，一个首页下来至少大半天。现在AI能写代码了，大家最关心的就是能不能把这步也省掉——把一张设计稿丢过去，直接出还不错的页面。实测下来，这事儿能办，但绝不是“丢一张图过去就完事”这么简单。这篇就把我踩过坑之后沉淀下来的完整工作流分享出来，从设计稿怎么准备、提示词怎么写，到生成出来的代码怎么校验、怎么修，一条龙讲清楚。适合谁看？主要面向被切图需求缠身的前端开发、需要自己搞定落地页的设计师，以及刚入门想知道AI能干啥的同学。我会尽量讲得细一点，带一点工程化思路，确保你照着操作就能把还原度从一个“勉强能看”提升到“能交付上线”的水平。1. 整体思路：先想明白AI到底怎么“看懂”psd很多人的第一反应是把psd文件直接拖给AI，让它“自己看着办”。这就搞错了一个根本问题：绝大多数对话式代码助手读不了psd这种二进制分层文件，它能理解的是图像和文字描述。所以整个转换流程的第一步，不是写提示词，而是把一个复杂的设计稿变成AI能消化的信息组合——一张清晰的整体预览图、若干张分区截图、一份结构化的设计规格（颜色、字号、间距、字体）。这个思路和以前团队协作时的做法很像。设计师交付切图时，不会只丢一个psd完事，还得附上标注图、切图资源、字体清单。现在只是把这些“标注”从人的语言翻译成提示词里的描述而已。想清楚这一点，你就能理解为什么AI生成结果飘忽不定的问题，大多数出在输入信息不完整，而不是模型能力不够。我一般把流程分成三条路线，看项目情况选：路线做法适用场景A. 全自动整页预览图 + 一句话提示词，直接生成个人Demo、临时需求、快速出效果B. AI辅助分段按头部、内容区、页脚等分区截图，分别生成再组装复杂落地页、有设计规范的项目C. 规格驱动先整理好设计规格（颜色/字体/间距），再让AI严格按规格生成需要精确还原、要交付上线我个人的建议是：第一次接触的项目走B或C。全自动路线适合自己做着玩，真到了交付层面，还原度根本压不住。后面我会详细展开B+C结合的实操，这也是目前我用下来最稳的组合。2. 准备阶段：把psd变成AI“爱吃”的料2.1 先整理设计稿结构，这一步不能省拿到psd先别急着截图。花十几分钟把图层检查一遍，把那些命名乱七八糟的分组理顺。很多人觉得这是形式和强迫症，其实不然——AI是看着渲染图写代码，但它更需要你告诉它“这里是什么”。如果图层里到处都是“组1副本2”，你自己都分不清哪是哪，提示词里自然也描述不准。更实际的好处是，整理分组能帮自己快速识别页面的结构层次：导航区、Banner区、特性区、产品列表区、内容区、页脚，一个页面通常就是这几个大块。顺带说一句易踩的坑：设计稿里常见的隐藏图层、未导出的小图标、只在某个交互态才显示的元素，PS里肉眼能看到或者能找出来，但AI只能看到你最终导出的那张图。所以导出前把所有要展示的图层设为可见，把不需要的元素隐藏干净，再把画布尺寸统一一下。我习惯把画布宽度固定到1280像素，这是绝大多数后台和营销页的设计基准宽度，AI写栅格布局的时候也更好判断。2.2 导出不同用途的预览图这一步是核心，我一般导出三类图：整页长图：完整页面从上到下的截图或导出图，AI用它理解整体布局和视觉风格。分区截图：按功能区块分别截取，比如“导航 + 首屏”“关于我们”“产品卡片”“新闻列表”“页脚”。分区截图的宽度一致，避免AI判断错布局比例。关键组件特写：按钮、卡片、表单输入框、图标组这类小元素单独截，方便AI写局部样式。导出长图时注意：设计稿如果很长（超过一屏），让它保持连续的长图格式就好，不要截成一段一段拼贴，否则AI会误以为是不同区块的随机组合。分区截图的命名也建议带上编号，比如“区块1-导航”“区块2-首屏Banner”，后面写提示词能直接引用。有人会问，既然有分区截图，还要长图干什么？实际经验是：AI只看分区图能保证局部没跑偏，但很容易丢失整体视觉一致性——比如各个区块的圆角大小、主色深浅存在细微差距。把长图作为全局参考，配合分区图做局部详细生成，效果最好。另外，PS里的切片工具可以按选区自动切出切图资源，配合“快速导出为PNG”，能省很多事。2.3 抄写一份设计规格清单这一步常被忽略，但决定还原度的上限。所谓设计规格，就是一份给AI的“书面约定”：主色、辅助色、文字色、背景色的色值；正文字号、标题字号、行高；以及按钮高度、内容区宽度、栅格间隔这类关键尺寸。做法很好记：用PS里的吸管工具和字符面板，把关键信息记到一个文档里。比如“主色 #2B6CB0；标题字号28px加粗；正文字号16px/行高28px；内容区最大宽度1200px；按钮高度48px圆角8px”。不要嫌麻烦——AI生成代码时可以对着一张图瞎猜，像素级的东西猜一次错一次；但你把这些数字喂给它，出来的样式就能做到八九不离十。这块相当于以前设计标注里的“样式规范”，只是换成了提示词内容。3. 提示词与生成策略：把“让AI干活”说清楚3.1 提示词的基本结构很多人写提示词就是“把这张图转成html”，够吗？够是够，AI也确实能出代码，但基本是“长得像”而已，细节经不起推敲。我更建议把提示词写成“角色 + 任务 + 输入描述 + 技术要求 + 输出要求”五段式。不是说每个字都有用，而是这样能让AI在生成过程中一直记得“自己是个前端工程师”，而不仅仅是一个图片描述工具。一个我常用的模板参考：你是一名资深前端开发工程师，负责把设计稿转换为标准化的HTML/CSS页面。 这是设计稿的完整预览图：[粘贴长图] 页面结构从上到下依次为： 1. 顶部导航：logo在左，导航链接在右，包含“首页”“产品”“关于”“联系”四个链接，链接间距均匀 2. 首屏Banner：大标题+副标题+右侧按钮（按钮主色为蓝色，圆角） 3. 产品特性区：三列卡片，每张卡片包含小图标、标题、描述 4. 内容展示区：左侧大图右侧文字说明，背景色为浅灰 5. 页脚：左半部分版权信息，右半部分社交图标 技术要求： - 使用原生HTML + CSS，不引入任何CSS框架 - 使用Flexbox/Grid布局 - 语义化标签：header、nav、main、section、footer - 保持设计稿的间距和比例 - 用CSS变量定义颜色、留白、字体 输出要求： - 先输出HTML代码，再输出CSS代码 - HTML和CSS分开，不内联样式 - 图片占位使用灰色背景的div，不对设计稿中的图片做下载处理这里强调“不解析图片、不做下载处理”很关键。AI没有能力替你从psd里导出真正的图片资源，你让AI去“拿图”，它要么编一个不存在的图片路径，要么把整张图作为背景拉进去，导致页面加载又慢又乱。正确做法是：AI负责搭结构和样式，图片位置用占位元素留着，我再把从PS里切好的图一个个换进去。3.2 分区生成，别硬碰一整页页面结构复杂时，整页一次性生成的代码一般会“跑型”，越到后面越离谱——开头还好好的，底部区块就开始胡来。反过来讲，如果按区块一个个生成，每个区块的代码都在可控范围内，最后拼接起来反而更快。我操作时会把提示词改成“现在是第2个区块：首屏Banner，参考这个分区截图：[图片]。页面背景为深蓝到浅蓝的渐变，大标题白色，副标题半透明白，按钮为黄色圆形按钮”。这样AI生成的代码更有针对性，误差率大幅下降。需要说明的是，分区生成会带来一个拼装问题：区块间间距怎么算？类名会不会冲突？解决方法是，在生成第一个区块时就定义好CSS变量，后面所有区块都用这套变量。比如最容易冲突的section、container、btn这类高频类名，提前告诉AI统一用“区块前缀”的方式命名，例如feature-card、footer-link，这样拼接时基本不会有交集。3.3 多轮对话比一次到位靠谱AI写代码这事，很难一次出成品。我一般分三个来回：第一轮，让AI生成“结构优先版”，先不管样式细节，把HTML骨架写出来；第二轮，让它按规格清单填充样式，把颜色、字号、间距补齐；第三轮，把页面截图发给AI，让它对比自身输出找差异，再修正。这个方法比反复说“还是不太对”高效得多。因为AI在第三轮能实实在在看到自己生成的页面长什么样，而不是只能根据文本“猜”哪里不对。它看到自己把按钮颜色写成了绿色，自然会主动修正。4. 实操过程：从一个营销页案例看完整落地下面用一个真实动手做过的场景来跑一遍完整流程——某公司产品介绍页，一个典型的营销落地页，包含导航、Banner、三列特性、图文展示、页脚五个区块。设计稿宽度1280px，整体配色是深蓝 + 橙色强调色。4.1 先把设计稿结构化我先把PS里的图层整理成五个大分组，按区块分了编号。接着导出一张整页长图、五张分区截图，并把关键规格抄写下来：主色: #14477D（深蓝） 强调色: #FF7A00（橙） 背景色: #F5F7FB（浅灰） 正文色: #333333 标题: 28px/700 正文: 16px/1.7 最大宽度: 1200px 按钮: 48px高/8px圆角这些数值看着简单，但直接决定了AI输出的精确度。比如按钮高度，AI如果对着图片猜，可能给32px或56px，视觉比例完全不一样；写了48px，它就能精确到像素级。4.2 让AI先“搭骨架”，不要急着修饰第一轮提示词我设为：“先用语义化标签搭建这个页面的HTML结构，用我提供的完整预览图和区块说明，暂不需要写详细CSS，用简单的灰色背景区分区块即可。”AI给出的HTML结构很清爽：一个header包logo和nav，main下面分设三个section，最后footer。骨架类名也用了语义化方式，和传统手写代码的思路基本一致。这里有个容易忽略的细节：AI喜欢给页面套很多无意义的div嵌套，这在初版还无所谓，但如果直接扩散到整个项目，就会变成“div包div再包div”的代码。所以我会在第一轮就把约束写进提示词：“不要使用多余的包裹元素，保持尽可能少的嵌套层级”。实测这一句话能减少一半的无效DOM。4.3 第二轮生成CSS，喂规格清单骨架确认没问题，我再把CSS部分单独生成。这次提示词会带上规格清单，并明确要求使用CSS变量：“定义:root变量，包含主色、强调色、背景色、正文色、标题字号、正文字号、最大宽度、按钮高度和圆角等。所有样式必须引用这些变量，不允许写死。”这一步出来的效果已经相当接近设计稿了：Banner的渐变色、卡片阴影、按钮圆角都还原得七七八八。个别地方有偏差，比如首屏标题的设计稿实际是居中显示，AI默认成了左对齐。这类文字对齐偏差在高保真还原里很常见，原因是AI对“位置关系”的判断不如“颜色字号”那么准。修正也不难，在下一轮指出来就行。4.4 第三轮对比页面截图，逐项校准把AI生成的页面在浏览器里打开，截图发给它，然后告诉它差异点：“整体结构已OK，但首屏标题应该是居中，Banner底部还有一个半透明的白色斜杠图案没展示出来；特性卡片的图标上方缺少间距。”AI会根据截图逐条修正CSS。这一步的体验很像在带一个细心但偶尔走神的实习生——你指哪里，它改哪里。关键是你要能准确说出差异点，所以我自己会先拿设计稿和浏览器截图对照一遍，列出差异清单。空间感强的话可以目测，不确定就用浏览器工具量一下：右键检查元素，鼠标悬停看盒模型；或者放大页面直接用截图对比。效率最高的是“半透明覆盖比对法”：把设计稿设为50%透明度放在最上层，下面垫着生成的页面，一眼就能看出哪块位置偏了。不过这个操作在普通显示器上做不了太精细，我一般只用来快速扫雷。4.5 把图片资源替换进去前面说了AI不管图片，现在该收尾了。我从PS里把logo、Banner背景图、特性图标、配图导出成png/jpg资源，放进项目的images目录；然后在HTML里找到对应的占位元素，替换为实际的img标签或背景图。替换时顺手把alt属性和图片尺寸写上，避免页面布局跳动。到这里，一个页面的“psd转html”就算真正完成了。这样生成的代码干净、可控、可维护，和以前手工写的差别不大，但时间从半天压缩到了半小时左右。5. 常见问题与排查技巧实录：踩过的坑都在这儿了5.1 生成的页面和设计稿的间距老跑偏怎么办间距跑偏是最高频的问题，几乎每次都遇到。原因很简单：AI对像素距离的判断来自图片像素推理，没有真正的尺寸参照物。遇到这种情况，不要一遍遍说“间距不对”，AI根本不知道差多少。正确的做法是明确给数值：“导航栏高度应为72px，现在看起来是60px；section之间的间距应为80px，请对应调整。”给具体数值后，AI一次就能改对。另外一个深层原因是字体环境。同一段文字，不同系统、不同字体渲染出来的宽度高度天差地别。AI在生成时没有加载设计稿里的字体（比如某种特殊字体），结果就是文字行高、宽度都不一样，间距自然跑偏。解决办法是，把设计稿里使用的字体名字告诉AI，并且在CSS里把回退字体链补齐：优先指定目标字体，然后挂通用系统字体。如果设计稿用了罕见字体，前端这边就得准备web font。这点在接地产、品牌官网等设计感强的项目时特别重要，因为这类设计稿特别爱用特殊字体，结果“看起来一样、量起来全歪”。5.2 AI生成了图片路径但没真实图片，页面全是裂图这就是没遵守“图片占位”规则的结果。AI生成的HTML里会有<img src="images/banner.png">这样的代码，但实际的图片文件根本不存在。解决办法很简单：要么在提示词里提前声明“所有图片用占位元素，不用img标签引用”；要么生成后全局搜索img标签，单独处理。万一AI已经把图片路径写进去了，也别慌——把真正的图片导出后覆盖同名文件，或者全局替换路径，几下就好。值得一提的坑是，AI有时候会把设计稿里的大段文字直接识别成乱码。这是图像识别里的老问题，特别是在花体字或低对比度场景下。解决方法是，将繁体的、长的、特殊的文字内容单独整理成文本，在提示词里直接给出：“产品标题为XXX，描述文字为XXX”，不要让它看图猜字。5.3 HTML结构嵌套过深、类名混乱，后期没法维护AI生成的HTML在结构上如果一开始没卡好，后面越写越乱。见过最夸张的情况是嵌套了七层div，只为实现一个两栏布局。整治这个问题的唯一方法是一开始就立规矩：提示词里明确“限制嵌套层级最多不超过3层”“类名使用语义化命名（如news-card、info-list）”“不得使用无语义的wrapper”。代码生成后再做快速检查：搜索一遍div数量，以及有没有连续多个无类名的div。有就抽出来，删掉多余的包裹层。这个问题在小项目上不明显，但一旦页面数量上了5个、10个，维护成本会直接拉爆。我的经验是，哪怕在AI辅助流程里，也要保持“代码要给人看”的心态。AI可以快，但结构必须是人类能看懂的。5.4 响应式适配全靠AI自己“脑补”，结果一塌糊涂很多AI生成代码时会把响应式写得很粗糙：随便放几个断点，768px时候隐藏一块，375px时候字号缩一下，根本不考虑设计稿里不同断位下的真实布局。要知道，原始psd只画了桌面端，没有平板和手机版。想让AI出一版能用的响应式，就得给它“补需求”，在提示词里明确写出每个断点的行为：- 在宽度小于等于768px时，导航栏改为折叠成汉堡菜单，特性卡片变成单列排列 - 在宽度小于等于480px时，标题字号缩小为24px，Banner按钮全宽显示 - 图片使用max-width: 100%，高度自动适配另外让AI用相对单位（rem、百分比、vw）而不是px，能省掉一半响应式的返工。CSS变量在这个场景下也特别香——改断点间距、字号、颜色都不用全局搜替换，直接改变量值就行。5.5 交互状态缺失：悬停、聚焦、动画全被AI忽略了设计稿是静态的，但页面是活的。AI生成的按钮十有八九没有hover效果、没有focus状态、没有过渡动画。这些交互细节如果等到AI生成完再手工补，那还是得逐条写，效率提升就很有限。所以我会在提示词的“技术要求”里直接列出交互清单：所有按钮需要有hover背景色变化和0.2s过渡导航链接需要下划线渐变展开的交互效果卡片hover时轻微上浮和阴影加深所有可聚焦元素需要有focus可见轮廓这么做以后，AI生成的代码里直接就带上交互样式，后期基本不用再加。而且AI写的过渡动画一般都不复杂，不像人写可能会炫技，它给的反而更稳妥、更顺着主流方案。尾声：说点实在的折腾这么久，我最大的体会是：AI不是把“psd转html”这个技能消灭了，而是把它从一个体力活变成了一个提效工具。你依然需要懂布局、懂规范、懂怎么验收，但那些重复的敲代码动作确实可以被它替代。最后再分享一个小技巧。当AI生成结果实在不理想、反复修也修不回来时，与其死磕，不如换个策略：让它先把页面的“结构注解”写出来——也就是只写每个区块是干什么的，用什么标签、层级怎么排，不带任何样式。等结构注解对清楚了，再填样式。大多数情况下，问题出在AI连结构都没理解对，前面修再多样式都是白费。这个办法帮我救回了很多看似无法收场的坏页面，你也可以试试。
干前端这些年，接得最多的需求就是“psd转html”。以前这活儿纯靠手工切图，先量尺寸、导切片，再一个像素一个像素地对着写样式，一个首页下来至少大半天。现在AI能写代码了，大家最关心的就是能不能把这步也省掉——把一张设计稿丢过去，直接出还不错的页面。实测下来，这事儿能办，但绝不是“丢一张图过去就完事”这么简单。这篇就把我踩过坑之后沉淀下来的完整工作流分享出来，从设计稿怎么准备、提示词怎么写，到生成出来的代码怎么校验、怎么修，一条龙讲清楚。适合谁看？主要面向被切图需求缠身的前端开发、需要自己搞定落地页的设计师，以及刚入门想知道AI能干啥的同学。我会尽量讲得细一点，带一点工程化思路，确保你照着操作就能把还原度从一个“勉强能看”提升到“能交付上线”的水平。1. 整体思路：先想明白AI到底怎么“看懂”psd很多人的第一反应是把psd文件直接拖给AI，让它“自己看着办”。这就搞错了一个根本问题：绝大多数对话式代码助手读不了psd这种二进制分层文件，它能理解的是图像和文字描述。所以整个转换流程的第一步，不是写提示词，而是把一个复杂的设计稿变成AI能消化的信息组合——一张清晰的整体预览图、若干张分区截图、一份结构化的设计规格（颜色、字号、间距、字体）。这个思路和以前团队协作时的做法很像。设计师交付切图时，不会只丢一个psd完事，还得附上标注图、切图资源、字体清单。现在只是把这些“标注”从人的语言翻译成提示词里的描述而已。想清楚这一点，你就能理解为什么AI生成结果飘忽不定的问题，大多数出在输入信息不完整，而不是模型能力不够。我一般把流程分成三条路线，看项目情况选：路线做法适用场景A. 全自动整页预览图 + 一句话提示词，直接生成个人Demo、临时需求、快速出效果B. AI辅助分段按头部、内容区、页脚等分区截图，分别生成再组装复杂落地页、有设计规范的项目C. 规格驱动先整理好设计规格（颜色/字体/间距），再让AI严格按规格生成需要精确还原、要交付上线我个人的建议是：第一次接触的项目走B或C。全自动路线适合自己做着玩，真到了交付层面，还原度根本压不住。后面我会详细展开B+C结合的实操，这也是目前我用下来最稳的组合。2. 准备阶段：把psd变成AI“爱吃”的料2.1 先整理设计稿结构，这一步不能省拿到psd先别急着截图。花十几分钟把图层检查一遍，把那些命名乱七八糟的分组理顺。很多人觉得这是形式和强迫症，其实不然——AI是看着渲染图写代码，但它更需要你告诉它“这里是什么”。如果图层里到处都是“组1副本2”，你自己都分不清哪是哪，提示词里自然也描述不准。更实际的好处是，整理分组能帮自己快速识别页面的结构层次：导航区、Banner区、特性区、产品列表区、内容区、页脚，一个页面通常就是这几个大块。顺带说一句易踩的坑：设计稿里常见的隐藏图层、未导出的小图标、只在某个交互态才显示的元素，PS里肉眼能看到或者能找出来，但AI只能看到你最终导出的那张图。所以导出前把所有要展示的图层设为可见，把不需要的元素隐藏干净，再把画布尺寸统一一下。我习惯把画布宽度固定到1280像素，这是绝大多数后台和营销页的设计基准宽度，AI写栅格布局的时候也更好判断。2.2 导出不同用途的预览图这一步是核心，我一般导出三类图：整页长图：完整页面从上到下的截图或导出图，AI用它理解整体布局和视觉风格。分区截图：按功能区块分别截取，比如“导航 + 首屏”“关于我们”“产品卡片”“新闻列表”“页脚”。分区截图的宽度一致，避免AI判断错布局比例。关键组件特写：按钮、卡片、表单输入框、图标组这类小元素单独截，方便AI写局部样式。导出长图时注意：设计稿如果很长（超过一屏），让它保持连续的长图格式就好，不要截成一段一段拼贴，否则AI会误以为是不同区块的随机组合。分区截图的命名也建议带上编号，比如“区块1-导航”“区块2-首屏Banner”，后面写提示词能直接引用。有人会问，既然有分区截图，还要长图干什么？实际经验是：AI只看分区图能保证局部没跑偏，但很容易丢失整体视觉一致性——比如各个区块的圆角大小、主色深浅存在细微差距。把长图作为全局参考，配合分区图做局部详细生成，效果最好。另外，PS里的切片工具可以按选区自动切出切图资源，配合“快速导出为PNG”，能省很多事。2.3 抄写一份设计规格清单这一步常被忽略，但决定还原度的上限。所谓设计规格，就是一份给AI的“书面约定”：主色、辅助色、文字色、背景色的色值；正文字号、标题字号、行高；以及按钮高度、内容区宽度、栅格间隔这类关键尺寸。做法很好记：用PS里的吸管工具和字符面板，把关键信息记到一个文档里。比如“主色 #2B6CB0；标题字号28px加粗；正文字号16px/行高28px；内容区最大宽度1200px；按钮高度48px圆角8px”。不要嫌麻烦——AI生成代码时可以对着一张图瞎猜，像素级的东西猜一次错一次；但你把这些数字喂给它，出来的样式就能做到八九不离十。这块相当于以前设计标注里的“样式规范”，只是换成了提示词内容。3. 提示词与生成策略：把“让AI干活”说清楚3.1 提示词的基本结构很多人写提示词就是“把这张图转成html”，够吗？够是够，AI也确实能出代码，但基本是“长得像”而已，细节经不起推敲。我更建议把提示词写成“角色 + 任务 + 输入描述 + 技术要求 + 输出要求”五段式。不是说每个字都有用，而是这样能让AI在生成过程中一直记得“自己是个前端工程师”，而不仅仅是一个图片描述工具。一个我常用的模板参考：你是一名资深前端开发工程师，负责把设计稿转换为标准化的HTML/CSS页面。 这是设计稿的完整预览图：[粘贴长图] 页面结构从上到下依次为： 1. 顶部导航：logo在左，导航链接在右，包含“首页”“产品”“关于”“联系”四个链接，链接间距均匀 2. 首屏Banner：大标题+副标题+右侧按钮（按钮主色为蓝色，圆角） 3. 产品特性区：三列卡片，每张卡片包含小图标、标题、描述 4. 内容展示区：左侧大图右侧文字说明，背景色为浅灰 5. 页脚：左半部分版权信息，右半部分社交图标 技术要求： - 使用原生HTML + CSS，不引入任何CSS框架 - 使用Flexbox/Grid布局 - 语义化标签：header、nav、main、section、footer - 保持设计稿的间距和比例 - 用CSS变量定义颜色、留白、字体 输出要求： - 先输出HTML代码，再输出CSS代码 - HTML和CSS分开，不内联样式 - 图片占位使用灰色背景的div，不对设计稿中的图片做下载处理这里强调“不解析图片、不做下载处理”很关键。AI没有能力替你从psd里导出真正的图片资源，你让AI去“拿图”，它要么编一个不存在的图片路径，要么把整张图作为背景拉进去，导致页面加载又慢又乱。正确做法是：AI负责搭结构和样式，图片位置用占位元素留着，我再把从PS里切好的图一个个换进去。3.2 分区生成，别硬碰一整页页面结构复杂时，整页一次性生成的代码一般会“跑型”，越到后面越离谱——开头还好好的，底部区块就开始胡来。反过来讲，如果按区块一个个生成，每个区块的代码都在可控范围内，最后拼接起来反而更快。我操作时会把提示词改成“现在是第2个区块：首屏Banner，参考这个分区截图：[图片]。页面背景为深蓝到浅蓝的渐变，大标题白色，副标题半透明白，按钮为黄色圆形按钮”。这样AI生成的代码更有针对性，误差率大幅下降。需要说明的是，分区生成会带来一个拼装问题：区块间间距怎么算？类名会不会冲突？解决方法是，在生成第一个区块时就定义好CSS变量，后面所有区块都用这套变量。比如最容易冲突的section、container、btn这类高频类名，提前告诉AI统一用“区块前缀”的方式命名，例如feature-card、footer-link，这样拼接时基本不会有交集。3.3 多轮对话比一次到位靠谱AI写代码这事，很难一次出成品。我一般分三个来回：第一轮，让AI生成“结构优先版”，先不管样式细节，把HTML骨架写出来；第二轮，让它按规格清单填充样式，把颜色、字号、间距补齐；第三轮，把页面截图发给AI，让它对比自身输出找差异，再修正。这个方法比反复说“还是不太对”高效得多。因为AI在第三轮能实实在在看到自己生成的页面长什么样，而不是只能根据文本“猜”哪里不对。它看到自己把按钮颜色写成了绿色，自然会主动修正。4. 实操过程：从一个营销页案例看完整落地下面用一个真实动手做过的场景来跑一遍完整流程——某公司产品介绍页，一个典型的营销落地页，包含导航、Banner、三列特性、图文展示、页脚五个区块。设计稿宽度1280px，整体配色是深蓝 + 橙色强调色。4.1 先把设计稿结构化我先把PS里的图层整理成五个大分组，按区块分了编号。接着导出一张整页长图、五张分区截图，并把关键规格抄写下来：主色: #14477D（深蓝） 强调色: #FF7A00（橙） 背景色: #F5F7FB（浅灰） 正文色: #333333 标题: 28px/700 正文: 16px/1.7 最大宽度: 1200px 按钮: 48px高/8px圆角这些数值看着简单，但直接决定了AI输出的精确度。比如按钮高度，AI如果对着图片猜，可能给32px或56px，视觉比例完全不一样；写了48px，它就能精确到像素级。4.2 让AI先“搭骨架”，不要急着修饰第一轮提示词我设为：“先用语义化标签搭建这个页面的HTML结构，用我提供的完整预览图和区块说明，暂不需要写详细CSS，用简单的灰色背景区分区块即可。”AI给出的HTML结构很清爽：一个header包logo和nav，main下面分设三个section，最后footer。骨架类名也用了语义化方式，和传统手写代码的思路基本一致。这里有个容易忽略的细节：AI喜欢给页面套很多无意义的div嵌套，这在初版还无所谓，但如果直接扩散到整个项目，就会变成“div包div再包div”的代码。所以我会在第一轮就把约束写进提示词：“不要使用多余的包裹元素，保持尽可能少的嵌套层级”。实测这一句话能减少一半的无效DOM。4.3 第二轮生成CSS，喂规格清单骨架确认没问题，我再把CSS部分单独生成。这次提示词会带上规格清单，并明确要求使用CSS变量：“定义:root变量，包含主色、强调色、背景色、正文色、标题字号、正文字号、最大宽度、按钮高度和圆角等。所有样式必须引用这些变量，不允许写死。”这一步出来的效果已经相当接近设计稿了：Banner的渐变色、卡片阴影、按钮圆角都还原得七七八八。个别地方有偏差，比如首屏标题的设计稿实际是居中显示，AI默认成了左对齐。这类文字对齐偏差在高保真还原里很常见，原因是AI对“位置关系”的判断不如“颜色字号”那么准。修正也不难，在下一轮指出来就行。4.4 第三轮对比页面截图，逐项校准把AI生成的页面在浏览器里打开，截图发给它，然后告诉它差异点：“整体结构已OK，但首屏标题应该是居中，Banner底部还有一个半透明的白色斜杠图案没展示出来；特性卡片的图标上方缺少间距。”AI会根据截图逐条修正CSS。这一步的体验很像在带一个细心但偶尔走神的实习生——你指哪里，它改哪里。关键是你要能准确说出差异点，所以我自己会先拿设计稿和浏览器截图对照一遍，列出差异清单。空间感强的话可以目测，不确定就用浏览器工具量一下：右键检查元素，鼠标悬停看盒模型；或者放大页面直接用截图对比。效率最高的是“半透明覆盖比对法”：把设计稿设为50%透明度放在最上层，下面垫着生成的页面，一眼就能看出哪块位置偏了。不过这个操作在普通显示器上做不了太精细，我一般只用来快速扫雷。4.5 把图片资源替换进去前面说了AI不管图片，现在该收尾了。我从PS里把logo、Banner背景图、特性图标、配图导出成png/jpg资源，放进项目的images目录；然后在HTML里找到对应的占位元素，替换为实际的img标签或背景图。替换时顺手把alt属性和图片尺寸写上，避免页面布局跳动。到这里，一个页面的“psd转html”就算真正完成了。这样生成的代码干净、可控、可维护，和以前手工写的差别不大，但时间从半天压缩到了半小时左右。5. 常见问题与排查技巧实录：踩过的坑都在这儿了5.1 生成的页面和设计稿的间距老跑偏怎么办间距跑偏是最高频的问题，几乎每次都遇到。原因很简单：AI对像素距离的判断来自图片像素推理，没有真正的尺寸参照物。遇到这种情况，不要一遍遍说“间距不对”，AI根本不知道差多少。正确的做法是明确给数值：“导航栏高度应为72px，现在看起来是60px；section之间的间距应为80px，请对应调整。”给具体数值后，AI一次就能改对。另外一个深层原因是字体环境。同一段文字，不同系统、不同字体渲染出来的宽度高度天差地别。AI在生成时没有加载设计稿里的字体（比如某种特殊字体），结果就是文字行高、宽度都不一样，间距自然跑偏。解决办法是，把设计稿里使用的字体名字告诉AI，并且在CSS里把回退字体链补齐：优先指定目标字体，然后挂通用系统字体。如果设计稿用了罕见字体，前端这边就得准备web font。这点在接地产、品牌官网等设计感强的项目时特别重要，因为这类设计稿特别爱用特殊字体，结果“看起来一样、量起来全歪”。5.2 AI生成了图片路径但没真实图片，页面全是裂图这就是没遵守“图片占位”规则的结果。AI生成的HTML里会有<img src="images/banner.png">这样的代码，但实际的图片文件根本不存在。解决办法很简单：要么在提示词里提前声明“所有图片用占位元素，不用img标签引用”；要么生成后全局搜索img标签，单独处理。万一AI已经把图片路径写进去了，也别慌——把真正的图片导出后覆盖同名文件，或者全局替换路径，几下就好。值得一提的坑是，AI有时候会把设计稿里的大段文字直接识别成乱码。这是图像识别里的老问题，特别是在花体字或低对比度场景下。解决方法是，将繁体的、长的、特殊的文字内容单独整理成文本，在提示词里直接给出：“产品标题为XXX，描述文字为XXX”，不要让它看图猜字。5.3 HTML结构嵌套过深、类名混乱，后期没法维护AI生成的HTML在结构上如果一开始没卡好，后面越写越乱。见过最夸张的情况是嵌套了七层div，只为实现一个两栏布局。整治这个问题的唯一方法是一开始就立规矩：提示词里明确“限制嵌套层级最多不超过3层”“类名使用语义化命名（如news-card、info-list）”“不得使用无语义的wrapper”。代码生成后再做快速检查：搜索一遍div数量，以及有没有连续多个无类名的div。有就抽出来，删掉多余的包裹层。这个问题在小项目上不明显，但一旦页面数量上了5个、10个，维护成本会直接拉爆。我的经验是，哪怕在AI辅助流程里，也要保持“代码要给人看”的心态。AI可以快，但结构必须是人类能看懂的。5.4 响应式适配全靠AI自己“脑补”，结果一塌糊涂很多AI生成代码时会把响应式写得很粗糙：随便放几个断点，768px时候隐藏一块，375px时候字号缩一下，根本不考虑设计稿里不同断位下的真实布局。要知道，原始psd只画了桌面端，没有平板和手机版。想让AI出一版能用的响应式，就得给它“补需求”，在提示词里明确写出每个断点的行为：- 在宽度小于等于768px时，导航栏改为折叠成汉堡菜单，特性卡片变成单列排列 - 在宽度小于等于480px时，标题字号缩小为24px，Banner按钮全宽显示 - 图片使用max-width: 100%，高度自动适配另外让AI用相对单位（rem、百分比、vw）而不是px，能省掉一半响应式的返工。CSS变量在这个场景下也特别香——改断点间距、字号、颜色都不用全局搜替换，直接改变量值就行。5.5 交互状态缺失：悬停、聚焦、动画全被AI忽略了设计稿是静态的，但页面是活的。AI生成的按钮十有八九没有hover效果、没有focus状态、没有过渡动画。这些交互细节如果等到AI生成完再手工补，那还是得逐条写，效率提升就很有限。所以我会在提示词的“技术要求”里直接列出交互清单：所有按钮需要有hover背景色变化和0.2s过渡导航链接需要下划线渐变展开的交互效果卡片hover时轻微上浮和阴影加深所有可聚焦元素需要有focus可见轮廓这么做以后，AI生成的代码里直接就带上交互样式，后期基本不用再加。而且AI写的过渡动画一般都不复杂，不像人写可能会炫技，它给的反而更稳妥、更顺着主流方案。尾声：说点实在的折腾这么久，我最大的体会是：AI不是把“psd转html”这个技能消灭了，而是把它从一个体力活变成了一个提效工具。你依然需要懂布局、懂规范、懂怎么验收，但那些重复的敲代码动作确实可以被它替代。最后再分享一个小技巧。当AI生成结果实在不理想、反复修也修不回来时，与其死磕，不如换个策略：让它先把页面的“结构注解”写出来——也就是只写每个区块是干什么的，用什么标签、层级怎么排，不带任何样式。等结构注解对清楚了，再填样式。大多数情况下，问题出在AI连结构都没理解对，前面修再多样式都是白费。这个办法帮我救回了很多看似无法收场的坏页面，你也可以试试。