Open Design + design.md：让 AI 生成的 UI 告别「AI 味」

原文链接：https://mp.weixin.qq.com/s/lTNIHUuMgLfYySsmPDjqqA 作者：祥子 AI工程化实战派 发布时间：2026年7月6日

摘要

一套让 AI 生成 UI 保持品牌一致性的组合方案。Open Design（开源设计画布工具，3.4 万 Star）提供可视化编辑界面 + MCP 协议让 AI 直接操作设计稿；design.md（Google 开源规范）用 YAML + Markdown 定义设计令牌。两个配合形成「设计指南 + AI 执行画布」的完整工作流。

主要内容

核心问题

AI 写前端页面颜色搭配乱、间距忽大忽小、每个页面像不同设计师做的——根本原因是 AI 没有设计约束。

两个工具

Open Design

• 类 Figma 可视化画布，AI 通过 MCP 协议直接在画布上操作
• 内置 150+ 设计系统、261 个插件
• 导出 HTML/React 代码或图片
• 本地运行，免费开源
• 官网：opendesigner.io / GitHub：github.com/nexu-io/open-design

design.md

• Google Labs 开源的规范格式，用 YAML 定义设计令牌
• 5 个核心板块：Colors → Typography → Spacing → Components → Layout
• GitHub：github.com/google-labs-code/design.md
• 现成设计系统合集：getdesign.md

搭配工作流

① 准备 design.md → 定义好设计系统
② 导入 Open Design → AI 加载规范
③ AI 在画布上做设计 → 遵守规范
④ 人工审查调整 → 所见即所得
⑤ 导出代码 → 设计稿变 HTML/React

上手步骤

1. git clone + npm run dev 启动 Open Design
2. 项目根目录创建 DESIGN.md（包含品牌色、字体、间距、组件规范）
3. 配置 MCP Server 连接 AI Agent（Claude Code / Codex 等）
4. 对话让 AI 生成设计稿，画布上实时调整
5. 满意后导出代码

选型对比

维度	纯 AI 生成	Open Design + design.md
品牌一致性	❌ 差	✅ 好
成本	低	免费开源
可视化编辑	❌ 无	✅ 有
离线运行	取决于工具	✅ 本地

原文关键段落

AI 生成的 UI 之所以有「AI 味」，根本原因是 AI 缺少设计约束。design.md 给它一套规则，Open Design 给它一个画布，两者配合，出来的东西就不一样了。

design.md 解决的是「规则」问题——把品牌色、字号、间距这些规则写死，AI 每次生成 UI 都必须遵守。Open Design 解决的是「执行」问题——AI 不再是直接吐代码，而是在一个可视化画布上操作。