用 Trae + Stitch MCP 打造 UI 自动化产出工作流（从设计到本地预览）

🚀 用 Trae + Stitch MCP 打造 UI 自动化产出工作流（从设计到本地预览）

在 AI 编程工具逐渐成熟的今天，「写代码」已经不是瓶颈，真正的效率瓶颈开始转向：

👉 UI 设计 → UI 实现 → UI 评审 → UI 迭代

这篇文章，我会带你搭建一套完整的自动化工作流：

Trae + Stitch MCP + stitch-skills → 一句话生成 UI + 高清原型图 + 本地预览

最终效果是：

🧠 一句话描述需求
🎨 自动生成 UI（Stitch）
🖼 自动导出高清原型图
📁 本地生成 previews/index.html 可视化预览

🧩 一、整体架构

这套工作流的核心结构如下：

复制代码

Trae（Agent）
   ↓
Stitch MCP（UI生成）
   ↓
stitch-skills（设计系统 + 优化）
   ↓
get_screen_image（高清UI图）
   ↓
本地文件系统（previews）
   ↓
index.html（UI画廊）

可以理解为：

👉 AI 设计师 + UI 工程师 + 评审工具 = 一个自动系统

🧠 二、关键组件解析

1️⃣ Trae（AI IDE）

Trae 是整个流程的控制中心：

承载 Agent
调用 MCP 工具
管理本地文件
执行工作流

你可以把它理解成：

👉 "带工具调用能力的 Cursor + 自动化编排器"

2️⃣ Stitch MCP（UI 生成引擎）

Stitch MCP 是 Google Stitch 的 MCP 接口，核心能力：

创建 UI screens
获取 UI HTML
获取 UI 图片（关键）
管理项目

我们在这个流程中主要用：

list_projects
get_screen_image

3️⃣ stitch-skills（设计能力增强）

stitch-skills 提供的是一套"设计思维能力"：

核心三个：

design-md

→ 建立设计系统（颜色 / spacing / 组件）
enhance-prompt

→ 把模糊需求变成结构化 UI
stitch-loop

→ 自动检查 & 优化 UI

🔄 三、完整工作流（核心）

下面是整个自动化流程的关键步骤：

Step 0：选择 Project（关键前置）

首先通过 MCP：

bash 复制代码

list_projects

输出类似：

复制代码

1. SaaS Dashboard（projectId: xxx）
2. Admin System（projectId: xxx）

用户选择一个 Project，后续所有 UI 都在该项目下生成。

👉 这是非常关键的一步，避免 UI 写错项目。

Step 1：需求增强（enhance-prompt）

用户输入：

"做一个用户管理后台"

AI 会自动补全为：

Dashboard
用户列表页
表单
状态（loading / empty）

👉 从一句话 → 完整 UI 设计描述

Step 2：生成设计系统（design-md）

在 Project 下生成 design.md：

包括：

主色 / 辅色
字体层级
spacing（8 / 16 / 24）
按钮 / 卡片规范

👉 这一层决定 UI 是否"专业统一"

Step 3：生成 UI（Stitch）

调用 Stitch MCP：

创建多个 screens
每个 screen 对应一个页面

例如：

dashboard
user-list
settings

Step 4：自动优化 UI（stitch-loop）

AI 会自动检查：

层级是否合理
是否缺状态
是否统一风格

不合格 → 自动重做 UI

👉 这是很多人忽略但最重要的一步

Step 5：导出高清 UI 原型图

调用：

bash 复制代码

get_screen_image

并做"高清增强"：

scale ≥ 2x
宽度 ≥ 1600px
不清晰 → 自动放大 + 锐化

👉 最终得到：

复制代码

/previews/images/dashboard.png
/previews/images/user-list.png

Step 6：生成 UI 预览页

自动生成：

复制代码

/previews/index.html

效果类似一个 UI 画廊：

🎨 UI Preview 示例

每个卡片包含：

UI 图片
screen 名称
screenId

👉 双击 index.html 即可查看全部 UI

📁 四、最终产物结构

bash 复制代码

/previews
  ├── index.html
  └── images/
        ├── dashboard.png
        ├── user-list.png
        └── settings.png

Agent 提示词

plain 复制代码

你是一个"Stitch UI 生成与可视化专家"。你的任务是：使用 Stitch MCP + stitch-skills 生成 UI screens，并将每个 screen 的原型图（image）下载到本地，同时生成一个 index.html 用于统一预览所有 UI。

你必须使用 stitch-skills（https://github.com/google-labs-code/stitch-skills），至少包含：
- design-md（设计系统）
- enhance-prompt（需求增强）
- stitch-loop（自动优化）

---

# 【核心前置流程：Project 选择（必须执行）】

## Step 0：获取 Project 列表（必须调用 MCP）

调用 Stitch MCP：

👉 list_projects

返回：
- projectId
- projectName

---

## Step 0.1：展示项目列表

以列表形式展示：

1. Project A（projectId: xxx）
2. Project B（projectId: xxx）

提示用户：

👉「请选择一个 Project（输入序号或 projectId）」

---

## Step 0.2：等待用户选择（强制阻断）

在用户未选择之前：

❌ 不允许：
- 执行 design-md
- 生成 UI
- 获取图片
- 写入任何文件

---

## Step 0.3：确认 Project

用户选择后：

- 解析 projectId
- 所有后续操作必须绑定该 Project

❌ 不允许修改 Project
❌ 不允许使用其他 Project

---

# 【核心交付物】

A) /previews/index.html  
B) /previews/images/<slug>.png（每个 screen 一张高清图）  
C) screen 清单（screenId / screenName / slug / 图片路径）

---

# 【主流程】

## Step 1：需求增强（enhance-prompt）

补全：
- 页面类型
- 布局结构
- 组件
- 状态（loading / empty / error）
- 风格（现代 / SaaS / 移动端）

---

## Step 2：设计系统（design-md）

在选中的 Project 下生成 design.md：

必须包含：
- 颜色体系
- 字体层级
- spacing / radius
- 组件规范

所有 UI 必须遵循该设计系统

---

## Step 3：生成 UI（Stitch MCP）

在该 Project 下创建 screens：

要求：
- 命名清晰
- UI 一致
- 符合 design.md

---

## Step 4：自动优化（stitch-loop）

至少执行一次：

检查：
- 层级
- 一致性
- 状态完整性
- 是否符合 design system

必要时回到 Step 3 优化

---

# 🚨 Step 5：获取 UI 原型图（必须高清）

对每个 screen 调用：

👉 get_screen_image

---

## 5.1 高清优先获取

如果支持参数，必须使用最高质量：

- scale / pixelRatio ≥ 2（优先 3）
- width ≥ 1440px
- quality = highest
- format = png

---

## 5.2 高清校验（硬标准）

必须满足：

- 宽 ≥ 1600px 或 高 ≥ 1600px
或
- 文件 ≥ 300KB

且：
- 文字清晰可读（按钮/标题/表格）

---

## 5.3 重试机制（必须执行）

如果不达标：

A) 提升参数重新调用 get_screen_image  
B) 若仍不达标：
   - 放大图片（2x / 4x）
   - 锐化处理  
C) 再次校验

---

## 5.4 失败兜底

如果仍不达标：

必须说明：
- 工具限制
- 已尝试方案

---

# 🚨 Step 6：保存图片

创建目录：

/previews/images/

生成：

/previews/images/<slug>.png

slug 规则：
- 小写
- 空格 → -
- 仅 a-z0-9-

❌ 不允许写入低清图片

---

# 🚨 Step 7：生成 index.html

路径：

/previews/index.html

---

## 页面要求

标题：
UI Preview Gallery

布局：
- grid
- 响应式
- 卡片布局

每个卡片：

- 图片：images/<slug>.png
- screenName
- screenId
- 文件路径

---

# 【输出要求】

必须输出：

## 1. screen 清单

- screenName
- screenId
- slug
- 图片路径

---

## 2. previews/index.html 完整代码

---

# ❌ 【严格禁止】

- 不允许跳过 Project 选择
- 不允许伪造 Project
- 不允许生成 HTML screen 页面
- 不允许输出小程序代码
- 不允许使用远程图片
- 不允许写入低清图
- 不允许跳过 get_screen_image

⚠️ 五、常见坑 & 解决方案

❌ UI 模糊

原因：默认截图分辨率低

解决：

强制 scale ≥ 2x
不达标自动重试

❌ UI 风格不统一

原因：没用 design-md

解决：

强制先生成 design system

❌ UI 在错误 Project

原因：跳过 project 选择

解决：

强制 list_projects → 用户选择

❌ Agent 不写本地文件

原因：Prompt 不够强

解决：

明确路径：
复制代码
```
/previews/index.html
/previews/images/
```

🧠 六、这套工作流的本质价值

你其实构建的是：

👉 一个"自动 UI 设计系统"

它替代了：

传统流程	现在
Figma 画 UI	Stitch 自动生成
手写代码	AI 生成
手动截图	自动导出
设计评审	index.html

🚀 七、可以如何扩展？

这套流程还能继续升级：

🔥 1. UI 版本管理

复制代码

/previews/v1
/previews/v2

🔥 2. 设计评审系统

自动标注 spacing
自动生成 UI 评论

🔥 3. 接入真实项目

React / 小程序自动生成代码
UI → 业务页面

✨ 结语

这套 Trae + Stitch MCP 工作流的核心不是"生成 UI"，而是：

👉 让 UI 设计变成一个可自动化、可复用、可评审的工程流程

如果你把它用在团队中，它的价值会远远超过一个"生成工具"。