AI 使用：种子页面复用、迭代设计与 Figma to html
针对重复页面、独特页面和设计稿三种场景，介绍如何用 AI CLI 提升开发效率。包含种子模板方法、迭代优化流程，以及截图和文档获取等关键技巧。
杭州
场景一：结构逻辑高度重复的页面
针对结构相似的页面，我会采用以下工作流：
- 创建种子模板：先实现一个功能完整的”种子页面”作为参考基准
- 描述差异点：向 AI 提供新页面的具体差异信息：
- 数据表格的字段定义
- 搜索条件的配置项
- 表单字段的属性
- 页面布局的预期效果
- 参照实现：指定以种子页面为模板，让 AI 生成相似结构的新页面
场景二：非重复页面
对于结构独特的页面，采用迭代设计的方式：
- 需求描述：向 AI 说明页面的结构布局和交互逻辑
- 方案生成：让 AI 基于需求生成初步实现方案
- 迭代优化：审阅方案，通过多轮沟通调整，直到方案符合预期
- 开始执行：跟据方案内容执行代码
场景三：基于设计稿生成代码
当有完整的设计稿时，可以直接利用 MCP (Model Context Protocol) 工具将设计转换为代码。
推荐工具：Figma MCP
这种方式适用于设计规范明确、视觉还原度要求高的场景。
最佳实践
为提升 AI 生成代码的质量，以下技巧值得注意：
提供准确的参考信息
- 当有参考页面时，截图提供给 AI 能显著提升理解准确度
- 确保依赖库文档的可获取性：
- 对于较新的依赖包，使用 context7 MCP 获取最新文档
- 对于较旧的依赖包，可将相关文档下载到本地，让 AI 直接读取
相关工具：HTML 转 Figma 插件
以下插件可以将现有 HTML 页面转换为 Figma 设计稿，方便进行设计迭代或团队协作：
1. HTML to Design
免费额度：每月 2 次
2. HTML to Design by Demoway
免费额度：每月 10 次