将设计稿转化为精准的AI编码指令正在成为开发新范式。本文揭示了一套五步核心流程，通过结构化描述解决直接投喂图片导致的布局错位、技术栈混乱等痛点，从视觉细节到交互逻辑的拆解方法，配合可复用的Prompt模板，让Claude/Cursor等工具产出可用代码的成功率提升300%。关键技巧在于建立‘图片-文字描述-代码’的精确映射关系，避开5大常见陷阱。

把设计稿/截图变成能让 AI 一次写出能用代码的 prompt。不是把图丢给 AI 让它”看着办”，是把图里的信息翻译成 AI 能稳定接住的描述。

这套流程解决什么

直接把图扔给 Claude/Cursor/v0 让它复刻，问题有几个：

• 模型对图的理解有损耗，颜色和间距经常猜
• 布局复杂时它会自己脑补，跟图对不上
• 没说技术栈，它默认给你一套你不想要的（比如你要 Vue 它给 React）
• 改起来反复横跳，因为最初的描述就模糊

加一步”看图 → 写描述 → 再投喂”，比直接丢图的成功率高很多。

五步走

1. 准备图

• 设计稿截图、网页截图、手画草图都行
• 一张图只放一个屏（手机一张、桌面一张，别拼一起）
• 如果有交互（hover、点击展开），单独截一张展开后的状态

图越糊，prompt 要写得越细。反过来也成立——图清楚的话 prompt 可以省话。

2. 看图，列清单

打开图，按下面这几项过一遍，能答上来的写下来，答不上来的标”待定”：

布局骨架

• 几栏？是不是有 sidebar？header/footer 各占多高？
• 主内容区是 grid 还是 flex 排的？
• 断点大概在哪（手机/平板/桌面）？

视觉

• 主色、强调色、背景色——能从图里吸到具体色值最好，吸不到就描述（“偏冷的深蓝”、“米白底”）
• 字体层级：标题、副标题、正文大概几号
• 圆角、阴影、边框这些细节要不要

组件

• 图里出现的可复用块（卡片、按钮、表单、tab、modal）列出来
• 每个组件的状态：默认 / hover / 选中 / 禁用，图里有几个就标几个

交互

• 哪些按钮要点了有反应？反应是什么？
• 有没有动画、过渡？

这一步不写代码，只是把图里的信息变成文字。

3. 写 Prompt

模板大概长这样，不是死的，按需调：

帮我用 [React + Tailwind] 实现下面这个界面。

技术栈：

– React 18 + TypeScript

– Tailwind CSS

– 不要引入额外的 UI 库（除非我点名）

布局：

– 整体是 [描述骨架，比如：左侧固定 240px 的 sidebar，右侧主内容区，顶部 64px 的 header]

– [描述断点行为]

视觉：

– 主色 #xxx，背景 #xxx

– 字体用系统默认，标题 [字号]，正文 [字号]

– 卡片圆角 8px，阴影用 Tailwind 的 shadow-sm

组件清单：

– [组件 A]：[作用 + 状态]

– [组件 B]：[作用 + 状态]

交互：

– [按钮 X] 点击 [做什么]

– [输入框 Y] [行为]

数据：

– 先用 mock 数据，写在组件内部 const 里就行

– [如果要 API，说清楚字段]

约束：

– 单文件实现，不要拆 components 文件夹

– 中文注释

– 不要写 README，不要解释思路，直接出代码

写完 prompt 之后，回头对一遍图。每一条描述都能在图里找到对应吗？图里有但 prompt 没写的，要么补，要么明确说”暂不实现”。

4. 把图 + Prompt 一起投喂

Claude / Cursor / Bolt / v0 都支持图片输入。投喂时图片和 prompt 一起给，不要先发图等回复、再发文字——会丢上下文。

第一轮产出基本不会一次到位。这是正常的。

5. 迭代

看到产出后，不要凭感觉说“再调调”。打开图和产出并排比，逐项指：

• “卡片间距比图里大，图里大概 12px，现在看着像 24px”
• “header 里的搜索框图上是带左侧 icon 的，现在没 icon”
• “图里这个按钮是 ghost 样式，现在写成了 solid”

指得越具体，AI 改得越准。模糊的”感觉不太对”基本上等于让它重写一遍。

几个容易踩的坑

坑 1：上来就让 AI 看图猜技术栈

它会猜，但猜的多半不是你想要的。prompt 第一句先把技术栈写死。

坑 2：图里有的东西，prompt 里不提

模型对图的理解会丢失细节。比如图里有个 badge，你 prompt 没提，它大概率不会画。不要假设它能看见图里所有东西。

坑 3：一次想把所有页面都做出来

一张图一次喂。多张图喂一次，AI 会偷懒——某几个组件复用一下，跟你图里的细节对不上。

坑 4：复杂交互让 AI 一次猜对

如果有那种”点击展开、再点击收起、收起时有动画”的逻辑，先让它出静态布局，跑通了再单独提交互需求。

坑 5：让 AI 自己“优化代码结构”

不要在第一轮说”代码要优雅”。先要”跟图一样”。等长得对了，再单独提一轮重构。

什么时候这套流程不合适

• 图特别简单（就一个登录页），直接发图说“用 React 实现这个”就够，不用写长 prompt
• 你自己也没想清楚要做什么，prompt 写不出来 —— 这种情况先别找 AI，先把需求想清楚
• 设计稿还在改 —— 等定稿，否则每改一版设计就要重写一版 prompt，得不偿失