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

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

怎么用呢？很简单。告诉 AI 你想要什么，它直接给你设计稿。

“帮我设计一个咖啡店主页，大面积产品图，氛围感”——30 秒后，你就能看到一个完整的可交互原型。要是你看到喜欢的 App 截图？上传图片直接还原成可编辑的 UI 页面，不用自己从头描述。

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

Google DESIGN.md 是什么？

2026 年 4 月 21 日（Apache 2.0 许可证），它从 Google Stitch 中独立发布。这是一种面向 AI 编码工具的设计系统规范文件格式，旨在解决 AI 生成 UI 时风格漂移、缺乏品牌一致性的问题。

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

第一层是 YAML，给机器读的设计 token：
colors:
primary: "#6750A4"
on-primary: "#FFFFFF"
primary-container: "#EADDFF"
typography:
h1:
fontFamily: Inter
fontSize: 2rem
fontWeight: 700
rounded:
sm: 4px
md: 8px
lg: 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 必须遵守它，不能自己编颜色、猜字体。

它还支持什么？

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

怎么开始？

打开 miaohui.design，输入你的第一个想法。

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

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

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