1105 字
3 分钟
利用 AI 完成 UI 设计
1. UI 设计 AI 工具对比
| Claude Design | Open Design | Google Stitch | |
|---|---|---|---|
| 出品方 | Anthropic | 开源社区（nexu-io） | Google Labs |
| 本质 | 对话式设计工作台 | Claude Design 的开源替代 | AI 原生设计画布 |
| 费用 | 需要 Pro 订阅（$20/月） | 完全免费 | 免费（beta） |
| 运行方式 | 云端（Anthropic） | 本地运行 | 云端（Google） |
| AI 模型 | 锁定 Claude Opus 4.7 | 自由选择（Claude Code/Cursor/Codex 等） | 锁定 Gemini |
| 数据归属 | Anthropic 服务器 | 自己的机器 | Google 服务器 |
| 画布模式 | 对话+画布 | 本地代理驱动 | 无限画布 |
| 多屏同时生成 | 有限 | 取决于模型 | 最多5屏同时生成 |
| 语音输入 | 不支持 | 不支持 | 支持 |
| 代码导出 | 支持 HTML/CSS | 支持 HTML/PDF/PPTX/MP4 | 支持HTML/CSS/React |
| DESIGN.md 支持 | 支持 | 支持（142+设计系统） | 支持（原创者） |
ClaudeDesign官方地址
OpenDesign官方地址
OpenDesign的Github地址
GoogleStitch的官方地址
2. 设计规范文档 DESIGN.md
DESIGN.md 可以理解为写给 AI 的“设计说明书”。它的作用让 AI 每次生成 UI 时都有稳定的风格边界。
DESIGN.md 主要解决三个问题：
- 风格一致：颜色、字体、圆角、间距不要每次都变。
- 方向明确：告诉 AI 这个产品是后台、工具、App，还是官网。
- 限制清楚：明确哪些风格不要出现。
DESIGN.md 更像是代码领域的 constitution.md
注：代码领域有 Spec Kit 这类“规格驱动开发”工具，但 UI 领域目前还没有同等统一的标准。
Design.md资源网站:
如果要搭建一套更完整的 UI 规格，可以这样拆：
| 文档 | 作用 |
|---|---|
PRODUCT_BRIEF.md | 产品目标、用户、场景、核心任务 |
UX_SPEC.md | 用户路径、页面流程、信息架构 |
DESIGN.md | 视觉风格、设计原则、组件气质 |
SCREEN_SPEC.md | 每个页面的模块、状态、响应式规则 |
COMPONENT_SPEC.md | 组件规范，例如按钮、输入框、表格、卡片 |
TOKENS.json | 颜色、字号、间距、圆角等设计变量 |
HANDOFF.md | 设计交付和代码实现说明 |
个人项目可以使用简化版的design.md,最小可用组合是：PRODUCT_BRIEF.md + DESIGN.md + SCREEN_SPEC.md
简化版design.md模板:
## 产品定位这是一个面向个人开发者的博客后台，帮助用户快速写文章、管理草稿、查看数据。
## 目标用户- 个人开发者- 技术写作者- 非专业内容运营者
## 视觉风格- 清爽、克制、专业。- 信息密度适中，适合长时间使用。- 不要营销落地页风格。- 不要大面积渐变、玻璃拟态、过度阴影。- 卡片圆角不超过 8px。
## 色彩- 背景使用浅灰白。- 主色使用偏蓝绿色，表达理性和效率。- 文本使用深灰，不使用纯黑。- 边框轻，不要厚重。
## 布局- 桌面端使用左侧导航 + 顶部工具栏 + 主内容区。- 移动端导航收起到底部或抽屉。- 重要操作放在右上角或主内容区顶部。
## 组件- 按钮要有明确主次。- 表单必须有 label、帮助文本和错误提示。- 列表要支持空状态、加载状态和错误状态。- 图标使用简洁线性风格。
## 文案- 简短、直接，不要营销腔。- 按钮使用动词，例如“新建文章”“保存草稿”。3. 原型设计：利用 AI 完成
3.1 使用 ClaudeDesigner 生成
ClaudeDesigner 目前 Claude 生态高度绑定，需付费订阅Claude才可使用。
3.2 使用 OpenDesigner 生成
OpenDesign 是开源工具，为ClaudeDesigner的免费替代品。点击链接下载配置AI Agent即可使用
- OpenDesigner 支持多个AI Agent，可使用官方 OpenDesigner AMR，主要是 Deepseek-v4-falsh，也可以使用本地安装的Codex或者ClaudeCode
- OpenDesigner 可制作ProtoType，PPT，image，video，audio等类型
- OpenDesigner 生成的文件实际为HTML/CSS 文件，而非.fig这种figma文件，因此无法直接再figma导入
导入到Figma中的方式：
- 采用插件形式，在Figma内部使用
Open html.to.design插件可导入HTML源文件或者URL地址，利用插件生成figma源文件，但免费版每月只有10次导入机会 - 采用 GoogleStitch 完成，在GoogleStich 中导入HTML源文件，并导入
Design.md文件利用 AI 将HTML绘制出来，再导出为Figma源文件
3.3 使用 GoogleStitch 完成
GoogleStitch使用 Gemini3 Flash 和 Gemini3.1 Pro 模型，每个月免费有400次生成机会。
在GoogleStitch中使用AI完成UI设计，之后直接进行修改完善或者直接导出为figma，再在figma中修改完善
4. 精细调整：利用 Figma 完成
按照上一章节的导入方式，将AI设计的UI稿导入到Figma中，然后手动进行修改完善
- 用 Figma 修正布局和间距
- 用 Figma 建立颜色和字体变量
- 用 Figma 组件化常用元素
- 用 Auto Layout 整理响应式
- 用 Figma 做原型连线
5. 转为代码
1. Figma的MCP服务
Figma的MCP服务需要付费使用
2. GoogleStitch的MCP服务
- 在StitchSetting里，使用CreatKey创建密钥之后，在下方的 MCP Setup里选择你的AI Agent，复制你的Configuratipon
- 之后将配置文件写入你本地的 AI CLI 配置文件中
- 在 AI Agent 里让AI调用MCP服务读取你的Stitch里的UI设计稿件
分享
如果这篇文章对你有帮助，欢迎分享给更多人！
利用 AI 完成 UI 设计
https://niushaoxiong.top/posts/利用ai完成ui设计/ 部分信息可能已经过时
相关文章 智能推荐
1
UI设计了解(AI生成)
UI设计 UI 设计入门笔记，整理界面概念、常见场景、设计目标、可用性和基础工作流程。
2
UI设计术语总结(AI生成)
UI设计 UI 设计术语笔记，整理设计对象、视觉规则、交互行为、响应式适配和协作规范。
3
DESIGN.md 文档学习（AI总结整理）
UI设计 DESIGN.md 学习笔记，整理设计规范文档的作用、结构、写法、约束内容和 AI 协作方式。
4
Figma简单学习(AI生成)
UI设计 Figma 学习笔记，整理云端协作、界面设计、原型制作、组件库和设计交付基础。
5
Google Stitch 和 Figma 对比
UI设计 Google Stitch 与 Figma 对比笔记，整理 AI 生成、协作、设计系统、原型和代码导出的差异。