设计稿转代码智能体

Sketch / Figma 设计稿直接生成前端代码：Flex 布局、语义化类名、切图，支持替换企业组件、生成接口请求

阅读设计转换文档查看定价

SKETCHcommerce.sketch100%

商城首页1440 × 1024

NOVA新品系列灵感

2026 年新系列为日常，设计更多可能

</>代码src/pages/home/index.wxml GENERATED

index.wxmlindex.wxssindex.ts

1<view class="store-page">
2 <nav-bar title="NOVA" />
3 <view class="hero">
4 <text class="hero__title">
5 为日常，设计更多可能
6 </text>
7 </view>
8 <product-grid items="{{products}}" />
9</view>

✓已生成 9 个文件Flex 布局 · 语义类名 · 资源

01指定设计稿
02页面设置
03生成API.ts
04生成业务代码

我们用蓝湖，也能用吗？

在Codex、Claude Code等编码智能体中指定设计稿文件，支持Sketch/Figma本地文档。如果你是蓝湖用户，可找设计师索要Sketch/Figma源文件，蓝湖是根据源文件导出的。

A前端实现 · 指定设计稿fushou-agent Skill

根据设计稿生成前端页面
设计稿: docs/design.sketch
需求PRD: docs/prd.md
接口定义: docs/openapi.json, 生成接口定义时仅生成与需求PRD中相关的接口。
组件文档索引: docs/components/category.md, 仅使用其中的PC组件。
生成时遵守AGENTS.md中定义的代码规范、样式规范。
生成的最终代码保存到：src/xxx 目录。

我会先读取 fushou-agent Skill，确认设计转换流程，再启动本地设计稿转换并等待页面设置。

Skill

读取 fushou-agent Skill~/.agents/skills/fushou-agent/SKILL.md

完成

bash

转换本地 Sketch 设计稿fushou-agent design --file docs/design.sketch --output ./output

运行中

继续描述实现目标，或使用 @ 添加文件Skill 已启用↑

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

在设置页面中选择画板、技术框架、标记UI组件替换、规则限制，点击生成，可生成采用FLEX布局、Class名称语义化的前端布局代码，以及切图；支持Vue、React、小程序、UniApp、Taro、RN等多种技术栈。

选择页面 / 画板

可多选；同一页面的多个状态可在最后一步合并说明。

已选择 1 / 2

9:41

搜索商品

轻量通勤双肩包城市系列 · 现货

¥399

日常随行保温杯生活系列 · 500ml

¥129

商品列表 · 默认状态A01 · 375 × 812

9:41

搜索商品

综合新品价格

轻量通勤双肩包城市系列 · 现货

¥399

日常随行保温杯生活系列 · 500ml

¥129

商品列表 · 筛选状态A02 · 375 × 812

微信开发者工具 · 静态布局产物编译成功

1<view class="catalog-page">
2 <van-search-bar value="{{keyword}}" />
3 <view class="product-grid">
4 <view class="product-card">
5 <image class="product-card__cover" />
6 <text class="product-card__name">轻量通勤双肩包</text>
7 </view>
8 </view>
9</view>

.catalog-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: #f6f7fa;
}
.product-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24rpx;
  padding: 24rpx;
}
.product-card {
  width: calc(50% - 12rpx);
}

Page({
  data: {
    keyword: ""
  }
});

{
  "navigationBarTitleText": "商品列表",
  "usingComponents": {
    "van-search-bar": "@vant/weapp/search/index"
  }
}

接口请求还要手写吗？

通过本地API工具列出并过滤后端提供的OpenAPI 3.x、Swagger 2.0或ApiFox文档，再由编码智能体按照AGENTS.md中的转换规则生成前端接口请求。生成的TS文件可复用项目指定网络请求库，并包含request/response实体类型。

A前端实现 · 生成 API.ts · 流程预览fushou-agent Skill

design.sketch → ./output 静态布局与切图已生成。
我会读取需求 PRD，并通过本地工具列出 OpenAPI 文档中的接口。筛选出当前页面需要的候选接口后，请你确认。

read

读取需求文档docs/prd.md

完成

bash

列出 OpenAPI 接口fushou-agent design openapi --list ./docs/api.json

完成

与商品列表需求相关的接口2 个 API

183GET/api/catalog/categories查询商品分类

184GET/api/catalog/items查询商品列表与分页数据

确认，仅生成上述接口。

bash

过滤已确认的接口定义fushou-agent design openapi --filter 183,184 --target ./output/openapi.filtered.json ./docs/api.json

完成

read

读取过滤后的 OpenAPI 定义./output/openapi.filtered.json

完成

编写

按项目规范生成 API.ts

src/xxx/api.ts

1 个文件

src/xxx/api.ts 已生成，包含请求与响应实体类型，并复用项目网络请求封装。现在生成最终代码吗？你也可以先补充业务规则。

继续描述实现目标，或使用 @ 添加文件Skill 已启用↑

能直接用上我们的组件库和代码规范吗？

描述业务目标，提供UI组件说明文档所处的位置，由编码智能体根据组件标注完成组件替换，接口请求与业务逻辑编写。可在AGENTS.md中指定代码规范、样式规范。

A前端实现 · 生成业务代码fushou-agent Skill

bash

过滤已确认的接口定义fushou-agent design openapi --filter 183,184 --target ./output/openapi.filtered.json ./docs/api.json

完成

read

读取过滤后的 OpenAPI 定义./output/openapi.filtered.json

完成

编写

按项目规范生成 API.ts

src/xxx/api.ts

1 个文件

src/xxx/api.ts 已生成，包含请求与响应实体类型，并复用项目网络请求封装。现在生成最终代码吗？你也可以先补充业务规则。

确认生成

我会按组件索引读取实际需要的 PC 组件说明，完成组件替换、接口接入、数据绑定与交互逻辑。

read

读取组件文档索引docs/components/category.md

完成

read

读取导航栏组件说明docs/components/pc/nav-bar.md

完成

编写

写入小程序页面文件

src/xxx/index.wxml
src/xxx/index.wxss
src/xxx/index.ts
src/xxx/index.json
src/xxx/images/product-01.webp

5 个文件

业务页面已经生成。已替换企业组件，接入 api.ts，补全加载、空态、错误处理与列表数据绑定；文件已保存到 ./src/xxx/。

继续描述实现目标，或使用 @ 添加文件Skill 已启用↑

在真实场景中验证效果

告诉我们你的测试或自动化场景，免费预约演示，技术顾问会在一个工作日内与你联系。

预约演示

设计稿转代码智能体

我们用蓝湖，也能用吗？

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

选择页面 / 画板

页面设置

选区指令 ×

接口请求还要手写吗？

能直接用上我们的组件库和代码规范吗？

在真实场景中验证效果

选区指令