> ## 文档索引
> 获取完整文档索引： https://fushouagent.com/docs/llms.txt
> 先阅读此索引，了解所有可用页面。

# 设计稿转代码智能体

> 从客户端启动设计稿转换，并完成画板、页面设置和可选元素标记。

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

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

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

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

## 开始转换 {#start}

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

```bash title="Terminal"
fushou-agent design \
  --file <设计稿路径> \
  --output <目标目录>
```

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

## 四步操作 {#workflow}

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

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

## 设置建议 {#settings}

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

## 结果与重试 {#results}

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

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

## 常见问题 {#faq}

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

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

### 必须标记元素吗？

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

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

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

## 相关主题

- [design](/docs/client/design.md)
- [客户端授权管理](/docs/console/client-authorizations.md)