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

妙绘 Design 基于 Google 开源的 DESIGN.md 设计协议，AI 自动生成风格统一的设计规范和可交互原型，终结 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：

yaml 复制代码

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 --- 给人读的设计意图：

markdown 复制代码

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

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

妙绘是怎么用 DESIGN.md 的？

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

css 复制代码

用户输入需求
    ↓
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，输入你的第一个想法。

arduino 复制代码

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

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

📸 图3：生成结果展示------DESIGN.md 设计规范 + HTML 可交互原型页面

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