AI 规范式 UI 设计:一键批量出页:高效落地不翻车

从 Google Stitch 的“对话生成 UI”理念获得启发，我们开发了妙绘这一产品，它整合了国内 AI 模型，用户只需打开即可使用。

灵感来自 Google Stitch

Google Stitch 第一次把“对话生成 UI”这件事做成了产品。我们深受启发，基于同样的开源协议，做了妙绘——接入国内 AI 模型，打开就能用。

用起来很简单：告诉 AI 你想要什么，它直接给你设计稿。

“帮我设计一个咖啡店主页，大面积产品图，氛围感” —— 30 秒后，你就能看到一个完整的可交互原型。

看到喜欢的 App 截图？上传图片直接还原为可编辑的 UI 页面，不用自己从头描述。

但这不算什么。真正特别的是，妙绘背后用的不是随意生成的颜色和间距，而是 Google 开源的 DESIGN.md 设计系统协议。

Google DESIGN.md 是什么？

2026 年 4 月 21 日（Apache 2.0 许可证），脱离 Google Stitch 独立发布。DESIGN.md 是一种面向 AI 编码袋里（如 Claude Code、Cursor）的设计系统规范文件格式，旨在解决 AI 生成 UI 时风格漂移、缺乏品牌一致性的问题。

一个 DESIGN.md 文件包含两层：

第一层，YAML — 给机器读的设计 token：

colors:primary: "#6750A4"on-primary: "#FFFFFF"primary-container: "#EADDFF"typography:h1:fontFamily: InterfontSize: 2remfontWeight: 700rounded:sm: 4pxmd: 8pxlg: 16px

第二层，Markdown — 给人读的设计意图：

## Colors主色 #6750A4 为紫罗兰色，灵感来源于薰衣草花田。采用 Material Design 3 Tonal Spot variant，确保 WCAG AA 级对比度。

核心思想：设计决策不应该靠人眼对齐，而应该被机器验证。

妙绘是怎么用 DESIGN.md 的？

妙绘的工作流和 Stitch 一脉相承，都是围绕 DESIGN.md 展开：

用户输入需求↓AI 生成 DESIGN.md（色彩、字体、间距、圆角）↓调用 Google Material Color Utilities 生成完整 49 色色板↓lint 自动校验：hex 格式、WCAG 对比度、token 完整性↓基于 DESIGN.md 生成 HTML 可交互原型↓你可以在画布中拖拽编辑、让 AI 局部修改

这意味着，AI 生成的每一页、每一个颜色、每一条间距，都有来源、可追溯、可验证。不是靠感觉，是靠 token。

为什么这很重要？

对设计师

不用再手动写标注了。妙绘生成的 DESIGN.md 可以直接导出为 Tailwind config 或 W3C 设计令牌格式，给开发直接用。

对开发者

拿到的不只是一张截图，而是一份可执行的设计规范。颜色是哪个 token、间距是哪个变量，清清楚楚。

对创业者

没有设计师也能做出专业级产品原型。DESIGN.md 就像一份“设计合同”，AI 必须遵守它，不能自己编颜色、猜字体。

它还支持什么？

1. 图片转 UI — 上传截图或设计参考图，AI 自动还原为可编辑的 HTML 页面
2. Material Design 3 — 自动从种子色推导完整色板，9 种 variant 可选
3. Material Symbols — 3000+ 图标，AI 自动匹配
4. 品牌图标库 — simple-icons 支持，微信、支付宝、GitHub 等即插即用
5. 明暗双主题 — 一套 DESIGN.md，同时输出亮色/暗色方案
6. 共享与 Fork — 生成的设计可以分享链接，别人可以 Fork 二次创作

怎么开始？

打开妙绘平台，输入你的第一个想法。

"设计一个旅行 App 首页，大图卡片布局，沉浸感"

30 秒后，你会得到一个完整的、有 DESIGN.md 作为设计规范的可交互原型。

妙绘 — 更适配国内环境的 AI 设计平台，打开就能用。