设计稿转代码智能体

设计稿转代码智能体用于把 Sketch 或 Figma 设计内容转换为可继续开发的前端布局代码、图片资源和参考截图。管理后台页面负责收集本次转换选择，转换完成后的文件写入客户端指定的目标目录。

生成的代码符合我们的技术栈吗？#

页面设置支持选择 Vue、React、小程序、UniApp、Taro、React Native（RN）等目标框架。生成结果包含 Flex 布局代码、语义化类名和切图；编码智能体可结合企业组件说明与项目代码规范继续完成组件替换、接口请求和业务逻辑。

若团队使用蓝湖，请向设计师索取对应的 Sketch / Figma 源文件后开始转换。流程示例见设计稿转代码智能体。

开始转换#

不要从空白页面直接上传设计稿。请先安装客户端并运行：

fushou-agent design \
  --file <设计稿路径> \
  --output <目标目录>

客户端准备好设计稿后会打开本页面。完整命令格式和支持文件参见 design 客户端文档。

四步操作#

1. 选择画板：勾选需要转换的画板，避免生成不需要的页面。
2. 页面设置：选择目标框架、尺寸单位和缩放关系。
3. 标记元素：可选步骤，用于指出需要重点识别或单独处理的区域；没有标记也可以继续。已标记项目左上角的 × 可以将其移除。
4. 生成代码：在第三步点击“下一步”后自动进入并立即开始生成，请保持客户端运行直到完成。

生成期间不能返回上一步或取消。仅当生成失败时，页面才会提供“上一步”和“取消生成”：返回后会保留此前的画板、设置和标记；取消会结束当前客户端任务。

设置建议#

• 框架应与目标项目一致，避免生成后再进行大范围结构调整。
• 尺寸单位和缩放比例应根据项目现有布局规则选择；不确定时使用页面默认值。
• 标记只用于补充意图，不需要把所有元素逐一圈选。

结果与重试#

生成结果包含前端代码、可复用图片资源、参考截图、design-to-code-refactor.md，以及每个画板各自的原始代码 .txt 文件。可从说明文件按画板名称打开对应文件。

如果设计稿准备或生成超时，确认客户端仍在运行、设计稿文件可读取、目标目录可写，然后重新运行命令。重新开始前请先保存目标目录中需要保留的手工修改。

常见问题#

为什么直接打开页面没有画板？#

该页面需要由客户端为一次具体转换准备内容。请从 fushou-agent design 开始。

必须标记元素吗？#

不必。只有需要强调组件边界、交互区域或特殊处理时才标记。

页面关闭后还能继续吗？#

转换设置属于本次运行。页面关闭或等待超时后，请重新运行客户端命令开始新的转换。