让AI做PSD转HTML这件事我前前后后折腾了小半年从最早的“AI随便生成个网页”到如今能在实际项目里稳定交付踩了不少坑也总结出一条相对靠谱的路子。这篇文章就把我真实的操作路径、翻车经历和现在正在用的工作流完整写出来希望能帮你少走点弯路。先说结论指望AI一键把PSD变成像素级还原的HTML目前还不太现实。但如果你愿意把活儿拆成“设计信息提取、代码结构生成、视觉细节微调”三步AI的效率是肉眼可见的能帮你省掉至少一半的机械劳动。以下内容是我实际项目的经验不是理论科普。1. PSD转HTML这件事的本质AI到底在替你做什么很多人一上来就问“哪个工具能把PSD变成HTML”这个问题本身就有点误区。PSD是个图层文件本质上是一堆像素和图层信息的容器而HTML是结构化的语义文档这两者之间隔着“视觉转结构”这道坎。AI能做的不是把.psd二进制“翻译”成HTML而是“看”懂设计稿里的视觉信息再用代码把它重建出来。说得更直白一点AI替你做的是三件事。第一件事是页面布局的识别也就是哪个区块是头部、哪个是导航、哪块是主要内容区、哪块是页脚。这件事对能理解视觉信息的模型来说是基本功。第二件事是样式系统的抽取包括颜色、字体、间距、圆角这些设计规范AI能从一张图上把这些视觉元素识别出来并映射成CSS变量或者具体的样式规则。第三件事是响应式方案的提示你要在提示词里告诉它断点怎么设置它才会去考虑移动端适配否则它默认按桌面端宽度给你生成这是很多人翻车的第一个原因。想明白这个本质之后你就知道期待值该怎么设了。AI不是替代设计师、也不是替代前端工程师它替代的是“照着图敲代码”的那个中间环节。以前这个环节需要你人工去看像素间距、去量色值、去数栅格现在AI几秒钟就能给出一个像模像样的初稿你的精力应该花在“审稿”和“优化”上而不是从零开始敲。再说个实际观察同一个AI你和它协作的方式不同产出质量能差一个档次。有不少人把PSD直接拖进对话框说“转成HTML”得到的结果基本不能用——布局错乱、文字溢出、样式丢失。但如果你先把PSD里的设计信息提取出来再结合结构化的提示词去约束AI产出的代码就能直接进入修改阶段。这就引出了下一节的内容不同输入方式的效果差异。2. 不同AI路线的实测对比喂图、喂PSD、喂标注我在多个项目里实测了三种主流的输入方式分别是直接把PSD文件喂给AI、把设计稿截图/导出图喂给AI、以及把“设计标注切图素材”喂给AI。我直接把它们的优劣势列出来后面再逐一细说。输入方式优点缺点我的推荐度直接喂PSD文件文件信息完整、图层名可见大多数AI无法直接解析二进制psd上下文容量受限输出易失控不推荐喂设计稿截图/导出图单张整图简单直接、AI理解准确、门槛低缺少图层信息、切图素材需另出复杂页面易丢细节适合简单页面或局部模块喂设计标注切图资源信息结构化、代码还原度高、可控性强需要人工预处理花费一定时间适合正式项目强烈推荐先说第一种直接喂PSD。以我目前的实测AI对.psd这种文件格式的解析能力很弱即便有个别工具号称支持实际处理时也会出现图层丢失、文字转曲丢失、样式错乱之类的问题。即便你把PSD转成了PDF再喂进去AI看到的也只是一张“带分层信息的图片”它能理解视觉却无法读取你PSD里的设计规范。所以这条路线目前基本是死路除非你用的还是老式Web服务那样把图像切片后逐块识别但那成本太高了不如老老实实用下面两种。第二种喂整图截图。这是大多数人从“AI聊天工具”切入PSD转HTML时最先尝试的方式。把设计稿导出成PNG或JPG直接丢给AI说一句“把这个设计稿转成HTML”。对于简单的单区块页面比如一个落地页、一个注册页AI产出的结果是相当能看的。但项目稍微复杂一点比如一个带侧边栏、多卡片、弹窗的官网首页AI就会开始“自由发挥”——它可能会丢掉某个模块可能把栅格系统排乱更不用说字体图标这类资源的引用问题。所以这种方式的适用范围有限。第三种喂设计标注切图资源是我现在主力推荐的方式。核心思路是你不用让AI去“读图猜结构”而是主动把设计稿里最关键的信息抽取出来以文字或JSON的形式告诉AI。比如页面有哪几个模块、每个模块的宽度是多少、使用的颜色色值是什么、间距规范是多少、哪些地方需要图片占位。这些信息进去之后AI生成代码的准确率会大幅提升几乎不会出现布局错乱的问题。这里我要单独解释一下为什么第三种方式的准确率会高那么多。AI从单张图片生成代码本质是“从像素推断语义”这对复杂页面来说是个不确定问题——它不知道哪个圆角是全局统一的、哪个是局部特例也不知道某个间距是固定的还是弹性的。而你给它的标注信息相当于提前把这些“不确定性”消解了。它只需要把已知信息翻译成HTML和CSS这本质上是格式化输出难度大大降低。3. 让AI生成可用代码的提示词写法与设计信息提取确定了输入方式之后另一个决定成败的关键就是提示词。很多人觉得提示词就是个“说人话”的过程其实不是的。对于PSD转HTML这种强结构化任务你要给AI的不是一句“帮我把这个设计稿转成HTML”而是一套完整的、上下文清晰的规范描述。我总结了一套提示词模板基本结构包括五个部分角色设定、设计信息摘要、页面结构要求、样式约束、输出格式要求。第一部分是角色设定。别小看这一步给AI设定一个“资深前端开发工程师”的角色和只把它当通用助手用产出的代码风格差距很明显。角色设定越具体AI越倾向于使用规范的语义化标签、合理的CSS组织方式和完整的响应式写法。第二部分是设计信息摘要。这是全套提示词里最核心的部分。你需要把设计稿里的关键信息用文字描述出来格式不限但至少要包含这些要素整体页面宽度比如1920px、页面包含的模块及顺序、主色与辅色的色值、字体类型和大小层级、间距规范比如模块间距、栅格间距、需要特殊处理的元素比如轮播图、表单、悬浮效果。设计信息项说明示例页面宽度设计稿基于多少像素宽度设计1920px模块列表从上到下列出所有区块顶部导航、Banner、特性区、价格表、页脚色板提取从PSD里提取主色和辅助色主色#0F62FE背景#F4F7FB字体层级各级标题和正文的字号与字重H1 48px/700正文16px/400间距规范模块间距和通用间距区块间距80px栅格间距24px特殊交互哪些地方需要交互效果Banner轮播、导航下拉、卡片Hover这些信息的提取方式我一般从PSD原文件里直接读取。打个比方如果设计稿是某公司做的一个官网首页我会打开PSD的“图层”面板先看图层分组结构把每个分组当成一个模块再用“颜色取样工具”去取各个板块的背景色和文字色记下色值接着看文字图层里的字号、字体、字重最后在“标尺”里把各区块的间距量一遍。这个过程听起来繁琐其实一个两页左右的PSD首页熟练之后十几分钟就能提取完而它对后续代码生成质量的提升是立竿见影的。第三部分是页面结构要求。你要在提示词里明确告诉AI页面从整体到局部应该怎么组织。比如“使用语义化HTML5标签头部用header导航用nav主要内容区域用main页脚用footer”。同时让AI在生成的代码里加上良好的注释标明每个模块的作用。这样生成出来的HTML你不用去猜那段代码是干什么的直接就能定位修改。第四部分是样式约束。这里要明确CSS的组织形式包括是否使用CSS变量、是否需要响应式、断点怎么设置、是用Flexbox还是Grid。我个人的偏好是让AI优先使用Grid做页面级布局、Flexbox做组件级布局这样既有全局的规则性又有局部的灵活性。响应式方面我会明确告诉AI定义三个断点桌面端1920px、平板768px、移动端375px并让它保证移动端不出现横向滚动条。第五部分是输出格式要求。这一点很多人都忽略AI默认会在同一个代码块里把HTML、CSS、JS全部交给你但实际项目里这些是要分开管理的。我会要求它“分别输出HTML文件、CSS文件和JS文件并在HTML里通过link和script标签引用外部文件”。这一步看着是小事却能在后续联调时省下大量拆分代码的时间。下面我贴一个实际用过的提示词示例供你直接参考你是一名资深前端开发工程师。请根据我提供的设计标注信息生成一个完整的登录页面HTML代码。 设计信息摘要 - 页面宽度1920px最小支持375px移动端。 - 模块顺序顶部Logo区、中央登录表单、底部版权信息。 - 主色#0F62FE辅助色#E8F0FE文字主色#17233D文字浅色#8A94A6。 - 字体系统默认字体栈标题字号24px/700正文字号14px/400。 - 间距表单区域宽度400px垂直间距16px区块上下间距40px。 - 特殊效果登录按钮Hover时背景变深输入框Focus出现主色边框。 页面结构要求 - 使用语义化标签header包裹Logomain包裹表单footer包裹版权信息。 - 代码注释清晰标明每个模块。 样式约束 - CSS使用变量统一管理色板和间距。 - 页面级布局使用Grid组件内部使用Flexbox。 - 响应式断点768px以下时表单区域宽度自适应100%。 输出格式要求 - 分别输出HTML和CSSCSS采用外部样式表方式引入。这个提示词的效果比我之前随便说一句“转成HTML”要好得多。生成的代码结构清晰、样式规范基本只需要微调就能用。所以如果你真想用AI做PSD转HTML花心思写提示词是绝对值得的。4. 从PSD里提取设计信息的实操方法标注重合与切图素材这一节重点讲我第二节里提到的“提取设计信息”具体怎么操作。很多人卡在这一步觉得工作量太大其实关键在于掌握方法之后会越来越熟练。我自己是设计师出身后来转做前端所以对PSD的图层结构有一定敏感度但即便你是纯前端下面的方法也够用。先从PSD的图层组说起。打开一个PSD文件第一步是看图层分组。一个规范的设计师通常会按模块去建组每组名字可能是“Header”“Banner”“Services”之类的英文也可能是中文的“头部”“横幅”“服务区”等。如果遇到图层命名混乱的设计稿那就只能靠视觉判断了。这一步的目的是在脑子里建立页面结构清单这个页面从上到下有哪些区块每个区块里有哪些元素。第二步是提取颜色和字体。提取颜色时不要用肉眼对着屏幕猜直接用PSD里的“吸管工具”快捷键I去点再到“拾色器”里精确读取十六进制色值。主色、辅助色、背景色、文字色各取几个记到一张便签上。字体信息则在文字图层的“字符”面板里读取包括字体名称、字号、字重、行高。如果文字图层的字体在系统里没安装面板上会显示缺字这时候留意一下设计稿里的文字样式再在代码里用相近的web-safe字体栈去替代也是可行的。第三步是量间距和尺寸。用PSD的“标尺”工具快捷键Ctrl/CmdR调出标尺或者直接画选区在“信息”面板里查看宽高数值。模块之间的间距、模块内部的padding、元素之间的margin这些是后续CSS还原的关键数据。我实际操作时一般会选一个基准密度比如所有区块间的垂直间距都是80px内部元素间距都是16px或24px这样提取数据时可以少记很多零散数字。如果发现设计稿本身存在不统一的间距我就取一个最接近的通用值等生成完代码再微调。第四步是切图素材导出。这是很多人问得最多的AI生成的HTML里用哪些图片我的做法是把PSD里所有需要切图导出的图层先整理出来比如Logo、图标、Banner里的主视觉、卡片配图等统一用“导出为Web所用格式”或者PSD里的“快速导出为PNG”把每个素材单独导出成一个图片文件。导出的文件夹放到项目目录里的assets/images下然后在提示词里告诉AI图片资源路径让它用相对路径引用。这一整步做完之后你就把一份“设计稿”翻译成了一组标准化的数据模块清单、色板、字体规范、间距规范、图片素材列表。这些东西喂给AI之后AI能做的事就是“照葫芦画瓢”而无需再去猜这个葫芦是什么样的代码自然就准了。还有一个比较取巧的进阶做法对于PSD里特别复杂的某一两个模块你可以单独把它们“命名导出”成PNG再把这些小图单独发给AI让它针对这一块生成一个完整组件代码。这样比你一次性把全页面塞给AI要靠谱得多因为单个模块的上下文复杂度低AI的注意力能集中细节还原度显著提升。5. 翻车现场复盘AI版HTML最常见的几个坑用了这么久的AI转码我总结出四个高频翻车点几乎每个项目都会遇到。知道这些坑以后你就不会在第一次看到烂代码时直接下结论“AI不行”。第一个坑是布局坍塌也是最严重的一个。表现为某些模块之间重叠、某些容器宽度溢出、嵌套结构乱了套。导致这个问题的原因多半是你在提示词里没有写明布局方式AI自己选了不合适的方案。比如它可能在垂直方向上用了多个单独的容器却忘了浮动或者在子元素上用了宽度百分比却没有考虑盒模型的padding。解决办法很直接在提示词里明确指定“页面级使用Grid组件级使用Flexbox”并规定“所有盒模型采用border-box”这两条能干掉一半的布局问题。第二个坑是响应式缺失或失效。AI按桌面端宽度生成时一般不会主动去写媒体查询。表现是你把窗口拉窄页面边缘被裁切或者某些元素挤成一团。这个问题的根源是提示词里没提断点要求。解决方式也很简单在提示词里明确写出“请在768px和375px处添加媒体查询移动端下禁止出现横向滚动条字号可等比缩小”。只要这句话写进去AI生成的响应式代码基本能过关。第三个坑是图片和字体资源引用错误。它会把图片直接写成外链或者用SVG占位符又在CSS里用local字体路径引用一个根本不存在的大文件。这个坑其实不是AI笨是它在猜测资源路径而你没有明确告诉它素材在哪里。我的对策是在提示词里明确写出“所有图片引用assets/images目录下的文件名不要使用外链字体使用系统字体栈不要引用外部字体文件”这样它就不会乱开药方了。第四个坑是交互功能缺失或逻辑混乱。尤其涉及轮播、Tab切换、手风琴、表单校验这类JS交互时AI经常会给一个“看起来合理但实际无法运行”的代码。比如轮播图只写了切换按钮却没有初始化和自动播放逻辑表单校验只写了正则却忘了绑定提交事件。我的经验是不要指望AI一次性把所有交互写完而是在提示词里一个一个地说清楚。比如“请实现一个自动轮播每隔3秒切换一次点击左右按钮可以切换上一张和下一张并在底部添加指示器”这样拆解开以后AI反而能写出更准的交互代码。常见问题主要原因一句话对策布局重叠、溢出提示词未指定布局方案明确告诉AI使用GridFlexbox和border-box响应式失效缺少断点要求提示词里写明断点宽度与禁止横向滚动图片/字体引用错误资源路径未告知给出明确的资源目录与文件命名约定交互逻辑残缺交互需求描述模糊将每个交互动作拆开逐个明确要求间距不统一设计信息提取不完整提取阶段记录统一间距规范写入提示词除了上述四个还有一个容易忽略的细节AI有时候会“自作聪明”地把文字内容改成大段英文Lorem ipsum占位或者给设计稿配一个完全没有在PSD里出现过的文案。遇到这种情况不用紧张把实际文案在提示词里补充一遍或者干脆让它先按占位符生成再自己替换以我经验后者反而更快。另外我最后要说的是AI转出来的代码有极大可能存在深层嵌套或者过度冗余。比如一个简单的两列卡片区域它可能给你包了七八层div。这时候不建议你强求AI写出最优雅的DOM结构毕竟它是在满足功能而不是做代码评审。你在拿到初稿后自己重构若干个关键模块即可绝大多数场景下这种重构比从零开始写还是要节省时间的。6. 当前我认为最高效的“人机协作”转码流程聊完单个项目的踩坑点我分享一下现在日常项目里的完整工作流。这套流程不一定适合所有团队但它有两个明显优点一是环节清晰团队里的人即使前端水平一般也能按照这个流程推进二是每个环节都有明确产出物后续修改起来不会互相踩脚。第一步是PSD体检和信息提取。拿到设计稿先看图层命名和分组是否规范。命名混乱的先花半小时理顺分组然后按我上面说的方法提取模块清单、色板、字体、间距和切图素材整理成一份“设计标注文档”。这个文档就是一个纯文本或Markdown文件可以放在项目仓库里作为参考。第二步是分模块提示词编写与代码生成。不要指望一次性把整个页面生成完。更靠谱的做法是把页面按模块拆成5到10个单元每个单元单独写一段提示词去生成。比如“顶部导航”一段提示词、“Banner轮播”一段提示词、“特性功能卡片区”一段提示词。这样做的原因很简单每个模块单独生成时AI的注意力更集中出错的概率更低而你后续检查和修改时也能精准定位到对应代码不会牵一发而动全身。第三步是人工整合与联调。把AI生成的各个模块代码整合到一个页面里先跑一遍看整体效果。这时要重点检查区块之间的间距是否和设计稿一致、颜色和字体是否符合规范、响应式断点是否正常、图片资源是否到位。这些检查和调整基本是我自己手动完成的因为这一步拼的不是代码生成能力而是整体的审美判断和结构组织能力。AI在这里只是个执行者你才是那个导演。第四步是交互与状态完善。AI能生成的交互代码通常是基础版本比如一个Tab切换、一个简单的Hover效果。真正复杂的交互比如多级菜单、表单校验联动、懒加载动画这需要你手动补充或者用专门的组件库去实现。这步不必勉强AI把项目里关键的体验性交互自己写既能保证质量也能控制打包体积。第五步是编译打包与走查。把最终的HTML、CSS、JS放进你的构建流程里跟着整个项目的编译和接口联调一起跑。然后对照原始PSD逐屏走查把细节差异一条条记录并修正。到这个阶段页面已经基本定型再往后就是微调和维护了。这套流程跑下来以我个人的项目经验看一个中等复杂度的企业官网首页包含导航、Banner、多栏目、表单、页脚从拿到PSD到产出可交付页面大概需要一天时间。其中AI真正生成代码的时间占比不到半小时剩下的时间基本都花在信息提取、代码整合、联调和走查上。如果纯人工去写这个页面即使是一个熟练前端通常也需要两到三天。所以即便AI只承担了“生成初稿”这一个小环节对整体效率的提升依然是实打实的。最后我想说一个心态上的建议AI转HTML这个事不要追求“全自动”。它应该被当作一把好用的刻刀而不是雕刻家。设计信息需要你判断结构需要你确认最终的视觉效果需要你校验。明确了这个边界AI在你手里就会变成一个异常趁手的工具而不是一个偶尔给你惊喜又经常添乱的玩具。在实际项目中多项目推进几次之后你会越来越清楚哪些环节可以放给AI、哪些环节必须亲自动手这种判断力才是这套工作流真正的价值所在。 
长河君 · 2026/10/22 18:02:59 · 阅读 1.2k AI辅助PSD转HTML全流程实战：从信息提取到高效交付
让AI做PSD转HTML这件事我前前后后折腾了小半年从最早的“AI随便生成个网页”到如今能在实际项目里稳定交付踩了不少坑也总结出一条相对靠谱的路子。这篇文章就把我真实的操作路径、翻车经历和现在正在用的工作流完整写出来希望能帮你少走点弯路。先说结论指望AI一键把PSD变成像素级还原的HTML目前还不太现实。但如果你愿意把活儿拆成“设计信息提取、代码结构生成、视觉细节微调”三步AI的效率是肉眼可见的能帮你省掉至少一半的机械劳动。以下内容是我实际项目的经验不是理论科普。1. PSD转HTML这件事的本质AI到底在替你做什么很多人一上来就问“哪个工具能把PSD变成HTML”这个问题本身就有点误区。PSD是个图层文件本质上是一堆像素和图层信息的容器而HTML是结构化的语义文档这两者之间隔着“视觉转结构”这道坎。AI能做的不是把.psd二进制“翻译”成HTML而是“看”懂设计稿里的视觉信息再用代码把它重建出来。说得更直白一点AI替你做的是三件事。第一件事是页面布局的识别也就是哪个区块是头部、哪个是导航、哪块是主要内容区、哪块是页脚。这件事对能理解视觉信息的模型来说是基本功。第二件事是样式系统的抽取包括颜色、字体、间距、圆角这些设计规范AI能从一张图上把这些视觉元素识别出来并映射成CSS变量或者具体的样式规则。第三件事是响应式方案的提示你要在提示词里告诉它断点怎么设置它才会去考虑移动端适配否则它默认按桌面端宽度给你生成这是很多人翻车的第一个原因。想明白这个本质之后你就知道期待值该怎么设了。AI不是替代设计师、也不是替代前端工程师它替代的是“照着图敲代码”的那个中间环节。以前这个环节需要你人工去看像素间距、去量色值、去数栅格现在AI几秒钟就能给出一个像模像样的初稿你的精力应该花在“审稿”和“优化”上而不是从零开始敲。再说个实际观察同一个AI你和它协作的方式不同产出质量能差一个档次。有不少人把PSD直接拖进对话框说“转成HTML”得到的结果基本不能用——布局错乱、文字溢出、样式丢失。但如果你先把PSD里的设计信息提取出来再结合结构化的提示词去约束AI产出的代码就能直接进入修改阶段。这就引出了下一节的内容不同输入方式的效果差异。2. 不同AI路线的实测对比喂图、喂PSD、喂标注我在多个项目里实测了三种主流的输入方式分别是直接把PSD文件喂给AI、把设计稿截图/导出图喂给AI、以及把“设计标注切图素材”喂给AI。我直接把它们的优劣势列出来后面再逐一细说。输入方式优点缺点我的推荐度直接喂PSD文件文件信息完整、图层名可见大多数AI无法直接解析二进制psd上下文容量受限输出易失控不推荐喂设计稿截图/导出图单张整图简单直接、AI理解准确、门槛低缺少图层信息、切图素材需另出复杂页面易丢细节适合简单页面或局部模块喂设计标注切图资源信息结构化、代码还原度高、可控性强需要人工预处理花费一定时间适合正式项目强烈推荐先说第一种直接喂PSD。以我目前的实测AI对.psd这种文件格式的解析能力很弱即便有个别工具号称支持实际处理时也会出现图层丢失、文字转曲丢失、样式错乱之类的问题。即便你把PSD转成了PDF再喂进去AI看到的也只是一张“带分层信息的图片”它能理解视觉却无法读取你PSD里的设计规范。所以这条路线目前基本是死路除非你用的还是老式Web服务那样把图像切片后逐块识别但那成本太高了不如老老实实用下面两种。第二种喂整图截图。这是大多数人从“AI聊天工具”切入PSD转HTML时最先尝试的方式。把设计稿导出成PNG或JPG直接丢给AI说一句“把这个设计稿转成HTML”。对于简单的单区块页面比如一个落地页、一个注册页AI产出的结果是相当能看的。但项目稍微复杂一点比如一个带侧边栏、多卡片、弹窗的官网首页AI就会开始“自由发挥”——它可能会丢掉某个模块可能把栅格系统排乱更不用说字体图标这类资源的引用问题。所以这种方式的适用范围有限。第三种喂设计标注切图资源是我现在主力推荐的方式。核心思路是你不用让AI去“读图猜结构”而是主动把设计稿里最关键的信息抽取出来以文字或JSON的形式告诉AI。比如页面有哪几个模块、每个模块的宽度是多少、使用的颜色色值是什么、间距规范是多少、哪些地方需要图片占位。这些信息进去之后AI生成代码的准确率会大幅提升几乎不会出现布局错乱的问题。这里我要单独解释一下为什么第三种方式的准确率会高那么多。AI从单张图片生成代码本质是“从像素推断语义”这对复杂页面来说是个不确定问题——它不知道哪个圆角是全局统一的、哪个是局部特例也不知道某个间距是固定的还是弹性的。而你给它的标注信息相当于提前把这些“不确定性”消解了。它只需要把已知信息翻译成HTML和CSS这本质上是格式化输出难度大大降低。3. 让AI生成可用代码的提示词写法与设计信息提取确定了输入方式之后另一个决定成败的关键就是提示词。很多人觉得提示词就是个“说人话”的过程其实不是的。对于PSD转HTML这种强结构化任务你要给AI的不是一句“帮我把这个设计稿转成HTML”而是一套完整的、上下文清晰的规范描述。我总结了一套提示词模板基本结构包括五个部分角色设定、设计信息摘要、页面结构要求、样式约束、输出格式要求。第一部分是角色设定。别小看这一步给AI设定一个“资深前端开发工程师”的角色和只把它当通用助手用产出的代码风格差距很明显。角色设定越具体AI越倾向于使用规范的语义化标签、合理的CSS组织方式和完整的响应式写法。第二部分是设计信息摘要。这是全套提示词里最核心的部分。你需要把设计稿里的关键信息用文字描述出来格式不限但至少要包含这些要素整体页面宽度比如1920px、页面包含的模块及顺序、主色与辅色的色值、字体类型和大小层级、间距规范比如模块间距、栅格间距、需要特殊处理的元素比如轮播图、表单、悬浮效果。设计信息项说明示例页面宽度设计稿基于多少像素宽度设计1920px模块列表从上到下列出所有区块顶部导航、Banner、特性区、价格表、页脚色板提取从PSD里提取主色和辅助色主色#0F62FE背景#F4F7FB字体层级各级标题和正文的字号与字重H1 48px/700正文16px/400间距规范模块间距和通用间距区块间距80px栅格间距24px特殊交互哪些地方需要交互效果Banner轮播、导航下拉、卡片Hover这些信息的提取方式我一般从PSD原文件里直接读取。打个比方如果设计稿是某公司做的一个官网首页我会打开PSD的“图层”面板先看图层分组结构把每个分组当成一个模块再用“颜色取样工具”去取各个板块的背景色和文字色记下色值接着看文字图层里的字号、字体、字重最后在“标尺”里把各区块的间距量一遍。这个过程听起来繁琐其实一个两页左右的PSD首页熟练之后十几分钟就能提取完而它对后续代码生成质量的提升是立竿见影的。第三部分是页面结构要求。你要在提示词里明确告诉AI页面从整体到局部应该怎么组织。比如“使用语义化HTML5标签头部用header导航用nav主要内容区域用main页脚用footer”。同时让AI在生成的代码里加上良好的注释标明每个模块的作用。这样生成出来的HTML你不用去猜那段代码是干什么的直接就能定位修改。第四部分是样式约束。这里要明确CSS的组织形式包括是否使用CSS变量、是否需要响应式、断点怎么设置、是用Flexbox还是Grid。我个人的偏好是让AI优先使用Grid做页面级布局、Flexbox做组件级布局这样既有全局的规则性又有局部的灵活性。响应式方面我会明确告诉AI定义三个断点桌面端1920px、平板768px、移动端375px并让它保证移动端不出现横向滚动条。第五部分是输出格式要求。这一点很多人都忽略AI默认会在同一个代码块里把HTML、CSS、JS全部交给你但实际项目里这些是要分开管理的。我会要求它“分别输出HTML文件、CSS文件和JS文件并在HTML里通过link和script标签引用外部文件”。这一步看着是小事却能在后续联调时省下大量拆分代码的时间。下面我贴一个实际用过的提示词示例供你直接参考你是一名资深前端开发工程师。请根据我提供的设计标注信息生成一个完整的登录页面HTML代码。 设计信息摘要 - 页面宽度1920px最小支持375px移动端。 - 模块顺序顶部Logo区、中央登录表单、底部版权信息。 - 主色#0F62FE辅助色#E8F0FE文字主色#17233D文字浅色#8A94A6。 - 字体系统默认字体栈标题字号24px/700正文字号14px/400。 - 间距表单区域宽度400px垂直间距16px区块上下间距40px。 - 特殊效果登录按钮Hover时背景变深输入框Focus出现主色边框。 页面结构要求 - 使用语义化标签header包裹Logomain包裹表单footer包裹版权信息。 - 代码注释清晰标明每个模块。 样式约束 - CSS使用变量统一管理色板和间距。 - 页面级布局使用Grid组件内部使用Flexbox。 - 响应式断点768px以下时表单区域宽度自适应100%。 输出格式要求 - 分别输出HTML和CSSCSS采用外部样式表方式引入。这个提示词的效果比我之前随便说一句“转成HTML”要好得多。生成的代码结构清晰、样式规范基本只需要微调就能用。所以如果你真想用AI做PSD转HTML花心思写提示词是绝对值得的。4. 从PSD里提取设计信息的实操方法标注重合与切图素材这一节重点讲我第二节里提到的“提取设计信息”具体怎么操作。很多人卡在这一步觉得工作量太大其实关键在于掌握方法之后会越来越熟练。我自己是设计师出身后来转做前端所以对PSD的图层结构有一定敏感度但即便你是纯前端下面的方法也够用。先从PSD的图层组说起。打开一个PSD文件第一步是看图层分组。一个规范的设计师通常会按模块去建组每组名字可能是“Header”“Banner”“Services”之类的英文也可能是中文的“头部”“横幅”“服务区”等。如果遇到图层命名混乱的设计稿那就只能靠视觉判断了。这一步的目的是在脑子里建立页面结构清单这个页面从上到下有哪些区块每个区块里有哪些元素。第二步是提取颜色和字体。提取颜色时不要用肉眼对着屏幕猜直接用PSD里的“吸管工具”快捷键I去点再到“拾色器”里精确读取十六进制色值。主色、辅助色、背景色、文字色各取几个记到一张便签上。字体信息则在文字图层的“字符”面板里读取包括字体名称、字号、字重、行高。如果文字图层的字体在系统里没安装面板上会显示缺字这时候留意一下设计稿里的文字样式再在代码里用相近的web-safe字体栈去替代也是可行的。第三步是量间距和尺寸。用PSD的“标尺”工具快捷键Ctrl/CmdR调出标尺或者直接画选区在“信息”面板里查看宽高数值。模块之间的间距、模块内部的padding、元素之间的margin这些是后续CSS还原的关键数据。我实际操作时一般会选一个基准密度比如所有区块间的垂直间距都是80px内部元素间距都是16px或24px这样提取数据时可以少记很多零散数字。如果发现设计稿本身存在不统一的间距我就取一个最接近的通用值等生成完代码再微调。第四步是切图素材导出。这是很多人问得最多的AI生成的HTML里用哪些图片我的做法是把PSD里所有需要切图导出的图层先整理出来比如Logo、图标、Banner里的主视觉、卡片配图等统一用“导出为Web所用格式”或者PSD里的“快速导出为PNG”把每个素材单独导出成一个图片文件。导出的文件夹放到项目目录里的assets/images下然后在提示词里告诉AI图片资源路径让它用相对路径引用。这一整步做完之后你就把一份“设计稿”翻译成了一组标准化的数据模块清单、色板、字体规范、间距规范、图片素材列表。这些东西喂给AI之后AI能做的事就是“照葫芦画瓢”而无需再去猜这个葫芦是什么样的代码自然就准了。还有一个比较取巧的进阶做法对于PSD里特别复杂的某一两个模块你可以单独把它们“命名导出”成PNG再把这些小图单独发给AI让它针对这一块生成一个完整组件代码。这样比你一次性把全页面塞给AI要靠谱得多因为单个模块的上下文复杂度低AI的注意力能集中细节还原度显著提升。5. 翻车现场复盘AI版HTML最常见的几个坑用了这么久的AI转码我总结出四个高频翻车点几乎每个项目都会遇到。知道这些坑以后你就不会在第一次看到烂代码时直接下结论“AI不行”。第一个坑是布局坍塌也是最严重的一个。表现为某些模块之间重叠、某些容器宽度溢出、嵌套结构乱了套。导致这个问题的原因多半是你在提示词里没有写明布局方式AI自己选了不合适的方案。比如它可能在垂直方向上用了多个单独的容器却忘了浮动或者在子元素上用了宽度百分比却没有考虑盒模型的padding。解决办法很直接在提示词里明确指定“页面级使用Grid组件级使用Flexbox”并规定“所有盒模型采用border-box”这两条能干掉一半的布局问题。第二个坑是响应式缺失或失效。AI按桌面端宽度生成时一般不会主动去写媒体查询。表现是你把窗口拉窄页面边缘被裁切或者某些元素挤成一团。这个问题的根源是提示词里没提断点要求。解决方式也很简单在提示词里明确写出“请在768px和375px处添加媒体查询移动端下禁止出现横向滚动条字号可等比缩小”。只要这句话写进去AI生成的响应式代码基本能过关。第三个坑是图片和字体资源引用错误。它会把图片直接写成外链或者用SVG占位符又在CSS里用local字体路径引用一个根本不存在的大文件。这个坑其实不是AI笨是它在猜测资源路径而你没有明确告诉它素材在哪里。我的对策是在提示词里明确写出“所有图片引用assets/images目录下的文件名不要使用外链字体使用系统字体栈不要引用外部字体文件”这样它就不会乱开药方了。第四个坑是交互功能缺失或逻辑混乱。尤其涉及轮播、Tab切换、手风琴、表单校验这类JS交互时AI经常会给一个“看起来合理但实际无法运行”的代码。比如轮播图只写了切换按钮却没有初始化和自动播放逻辑表单校验只写了正则却忘了绑定提交事件。我的经验是不要指望AI一次性把所有交互写完而是在提示词里一个一个地说清楚。比如“请实现一个自动轮播每隔3秒切换一次点击左右按钮可以切换上一张和下一张并在底部添加指示器”这样拆解开以后AI反而能写出更准的交互代码。常见问题主要原因一句话对策布局重叠、溢出提示词未指定布局方案明确告诉AI使用GridFlexbox和border-box响应式失效缺少断点要求提示词里写明断点宽度与禁止横向滚动图片/字体引用错误资源路径未告知给出明确的资源目录与文件命名约定交互逻辑残缺交互需求描述模糊将每个交互动作拆开逐个明确要求间距不统一设计信息提取不完整提取阶段记录统一间距规范写入提示词除了上述四个还有一个容易忽略的细节AI有时候会“自作聪明”地把文字内容改成大段英文Lorem ipsum占位或者给设计稿配一个完全没有在PSD里出现过的文案。遇到这种情况不用紧张把实际文案在提示词里补充一遍或者干脆让它先按占位符生成再自己替换以我经验后者反而更快。另外我最后要说的是AI转出来的代码有极大可能存在深层嵌套或者过度冗余。比如一个简单的两列卡片区域它可能给你包了七八层div。这时候不建议你强求AI写出最优雅的DOM结构毕竟它是在满足功能而不是做代码评审。你在拿到初稿后自己重构若干个关键模块即可绝大多数场景下这种重构比从零开始写还是要节省时间的。6. 当前我认为最高效的“人机协作”转码流程聊完单个项目的踩坑点我分享一下现在日常项目里的完整工作流。这套流程不一定适合所有团队但它有两个明显优点一是环节清晰团队里的人即使前端水平一般也能按照这个流程推进二是每个环节都有明确产出物后续修改起来不会互相踩脚。第一步是PSD体检和信息提取。拿到设计稿先看图层命名和分组是否规范。命名混乱的先花半小时理顺分组然后按我上面说的方法提取模块清单、色板、字体、间距和切图素材整理成一份“设计标注文档”。这个文档就是一个纯文本或Markdown文件可以放在项目仓库里作为参考。第二步是分模块提示词编写与代码生成。不要指望一次性把整个页面生成完。更靠谱的做法是把页面按模块拆成5到10个单元每个单元单独写一段提示词去生成。比如“顶部导航”一段提示词、“Banner轮播”一段提示词、“特性功能卡片区”一段提示词。这样做的原因很简单每个模块单独生成时AI的注意力更集中出错的概率更低而你后续检查和修改时也能精准定位到对应代码不会牵一发而动全身。第三步是人工整合与联调。把AI生成的各个模块代码整合到一个页面里先跑一遍看整体效果。这时要重点检查区块之间的间距是否和设计稿一致、颜色和字体是否符合规范、响应式断点是否正常、图片资源是否到位。这些检查和调整基本是我自己手动完成的因为这一步拼的不是代码生成能力而是整体的审美判断和结构组织能力。AI在这里只是个执行者你才是那个导演。第四步是交互与状态完善。AI能生成的交互代码通常是基础版本比如一个Tab切换、一个简单的Hover效果。真正复杂的交互比如多级菜单、表单校验联动、懒加载动画这需要你手动补充或者用专门的组件库去实现。这步不必勉强AI把项目里关键的体验性交互自己写既能保证质量也能控制打包体积。第五步是编译打包与走查。把最终的HTML、CSS、JS放进你的构建流程里跟着整个项目的编译和接口联调一起跑。然后对照原始PSD逐屏走查把细节差异一条条记录并修正。到这个阶段页面已经基本定型再往后就是微调和维护了。这套流程跑下来以我个人的项目经验看一个中等复杂度的企业官网首页包含导航、Banner、多栏目、表单、页脚从拿到PSD到产出可交付页面大概需要一天时间。其中AI真正生成代码的时间占比不到半小时剩下的时间基本都花在信息提取、代码整合、联调和走查上。如果纯人工去写这个页面即使是一个熟练前端通常也需要两到三天。所以即便AI只承担了“生成初稿”这一个小环节对整体效率的提升依然是实打实的。最后我想说一个心态上的建议AI转HTML这个事不要追求“全自动”。它应该被当作一把好用的刻刀而不是雕刻家。设计信息需要你判断结构需要你确认最终的视觉效果需要你校验。明确了这个边界AI在你手里就会变成一个异常趁手的工具而不是一个偶尔给你惊喜又经常添乱的玩具。在实际项目中多项目推进几次之后你会越来越清楚哪些环节可以放给AI、哪些环节必须亲自动手这种判断力才是这套工作流真正的价值所在。