将设计师的 UI 图转化为可运行的代码项目，核心在于**“消除歧义”**。AI 虽然能“看”图，但它无法像人类设计师那样理解背后的业务逻辑、交互细节或未画出的状态。

要准确指导 AI 生成高质量项目，你需要扮演**“产品经理 + 技术架构师”**的角色，通过结构化的提示词（Prompt）将视觉信息转化为技术规格。

以下是一套完整的操作指南，分为准备阶段、提示词构建框架、迭代优化三个部分：

第一阶段：准备工作（不仅仅是上传图片）

在把图丢给 AI 之前，你需要整理好以下上下文信息，因为单靠一张图，AI 只能猜出 60% 的内容。

1. 明确技术栈 (Tech Stack)

   • 前端框架：React, Vue, Next.js, Svelte?
   • 样式方案：Tailwind CSS, Styled-components, SCSS, Material UI?
   • 语言：TypeScript (强烈推荐) 还是 JavaScript?
   • 状态管理：Zustand, Redux, Pinia?

2. 补充缺失的逻辑 (The Invisible Logic)

   • UI 图通常是静态的。你需要告诉 AI：
     • 点击这个按钮后发生什么？（跳转、弹窗、提交表单？）
     • 数据从哪里来？（硬编码 Mock 数据，还是调用 API？）
     • 异常状态长什么样？（加载 Loading、空状态 Empty、报错 Error）

3. 图片处理技巧

   • 切片/分块：如果是一个复杂的后台管理系统全景图，不要一次性让 AI 生成所有代码。按模块截图（如：侧边栏、顶部导航、主内容区），分步生成。
   • 清晰度：确保截图清晰，文字可读。如果是 Figma/Sketch，导出 @2x 或 @3x 的 PNG。

第二阶段：构建“超级提示词”框架

不要只说“把这个图写成代码”。请使用以下结构化模板，将信息喂给 AI。

📋 提示词模板结构

# 角色设定
你是一位资深的前端工程师，擅长将设计稿高保真还原为代码。你注重代码的可维护性、响应式布局和组件化思维。

# 任务目标
请根据我提供的 UI 截图，编写一个 [页面名称] 的前端代码。

# 技术栈要求
- 框架：[例如：React 18 + TypeScript]
- 样式：[例如：Tailwind CSS]
- 图标库：[例如：Lucide React 或 FontAwesome]
- 其他：[例如：使用 Framer Motion 做简单动画]

# 设计规范与细节 (关键部分)
1. **布局结构**：
   - 整体采用 [例如：Flexbox/Grid] 布局。
   - 移动端优先，需要适配手机和桌面端（断点参考：768px）。
2. **色彩与字体**：
   - 主色调提取自图片中的 [描述颜色，如：深蓝色 #1E40AF]。
   - 字体家族使用系统默认或 Inter。
3. **组件拆解**：
   - 请将页面拆分为以下组件：Header, Sidebar, DashboardCard, UserTable。
   - 每个组件单独文件存放（如果可能）。

# 交互逻辑 (图片看不到的部分)
- [按钮 A]：点击后触发 console.log("提交")，并显示 loading 状态 2 秒。
- [输入框 B]：需要表单验证，不能为空。
- [列表 C]：目前使用 Mock 数据渲染 5 条示例数据。
- **悬停效果**：卡片鼠标悬停时轻微上浮并增加阴影。

# 输出要求
1. 先简要分析你的实现思路。
2. 提供完整的目录结构树。
3. 提供核心组件的代码（包含注释）。
4. 确保代码可以直接复制运行（如果是单文件演示）或清晰区分文件。

# 附件
[在此处上传 UI 截图]

第三阶段：执行策略与迭代优化

1. 分步生成法 (Step-by-Step)

对于复杂页面，一次性生成容易出错或代码截断。建议按顺序对话：

• 第一步：骨架与布局

  “请先分析这张图的布局结构，用 HTML/Tailwind 写出整体的 Grid/Flex 骨架，不需要具体内容和样式细节，先保证结构对。”

• 第二步：填充组件

  “结构没问题。现在请编写‘顶部导航栏’组件的代码，注意响应式菜单的处理。”

• 第三步：添加交互与数据

  “现在为‘用户列表’部分添加 Mock 数据，并实现排序功能的逻辑。”

2. 利用 AI 的“视觉识别”进行校对

如果 AI 生成的颜色和原图有偏差，可以直接指出：

“你生成的按钮蓝色太浅了，请参考截图中的深蓝色， hex 码大约是 #0055FF，请修正 CSS。”

3. 处理动态状态

AI 默认只写静态页。你必须显式要求：

“请补充这个表单的‘加载中 (Loading)'状态和‘提交成功 (Success Toast)'状态的代码逻辑。”

💡 高级技巧：如何获得更专业的结果？

1. 指定设计系统 (Design System)
   如果你的公司有自己的设计规范，可以在 Prompt 中描述：“遵循 Ant Design 的设计语言，圆角为 8px，阴影使用 level-2"。这会让 AI 生成的代码风格更统一。

2. 要求“像素级”还原的参数
   如果你需要极高的还原度，可以加一句：

   “请仔细观察截图中的 padding 和 margin 间距，尽量通过目测估算像素值（如 p-4, m-2），保持视觉比例与原图一致。”

3. 使用多模态大模型的优势
   如果你使用的是 Claude 3.5 Sonnet 或 GPT-4o 这类视觉能力强的模型，你可以让它先解释再写代码：

   “在写代码之前，请先列出你从图中识别出的所有 UI 元素、层级关系和潜在的交互点。确认无误后，再生成代码。”
   (这一步能让 AI 自我纠错，大幅减少幻觉)

总结流程图

1. 截图 (清晰、分块)
   ⬇️
2. 定义上下文 (技术栈 + 业务逻辑 + 交互细节)
   ⬇️
3. 发送结构化 Prompt (角色 + 任务 + 规范 + 逻辑 + 图片)
   ⬇️
4. 审查与迭代 (检查布局 -> 检查样式 -> 补充交互 -> 修复 Bug)
   ⬇️
5. 整合代码

通过这种**“结构化输入 + 分步执行 + 显式逻辑补充”**的方法，你可以将 AI 从一个“只会看图说话的实习生”变成一名“高效的高级前端开发者”。