DESIGN.md 时代：为什么设计系统第一次成为了 AI 可读的源代码

ShadowDESIGN.md 让设计系统可以像代码一样可以版本控制、可以 Code Review、可以复用。我们在三个月前的《驾驭Gemini人人皆可成为AI产品创客》这本新书里已经把这个作为主要方法写入了书中。「这大概是最好的一次迭代了。但老实说我对 Stitch 能在短时间内输出真正高水平设计这件事是相当失望的。」说出这句话的人是 Gary一位从业近 30 年的设计师AI Native Design 发起人。他用新版 Google Stitch 生成落地页初始质量评语只有一个字平庸[1]。与此同时Chris 在同一个工具上跑了完整流程截图 → Stitch 生成专业设计 → 导出 DESIGN.md → Claude Code 读取规则 → 重构整个 App UI。他给的结果匹配度约 80%[2]。同一个工具两个极端评价。这到底是怎么回事两个评测一个本质Gary 的失望来自期待错位 —— 他希望 Stitch 生成的设计能直接当最终成品结果生成质量远低于预期。编辑体验差无法直接选中区块改背景色文本编辑时回退键行为异常。Chris 的兴奋来自另一个场景——他把 Stitch 作为设计探索工具目标是生成 DESIGN.md再交给 Claude Code 去执行代码重建。在这个工作流里Stitch 只需要足够好到能导出设计系统不需要「足够好到直接当产品」。两者的本质分歧其实早在 2026 年 3 月 18 日 Stitch 2.0 发布时就埋下了伏笔。那天 Google 推出了一项功能更新不叫「设计稿转代码」而是一个全新格式——DESIGN.md[3]。DESIGN.md不是格式是范式DESIGN.md 是什么Google 官方的定义是一种 agent-friendly 的 Markdown 文件[4]用来描述完整设计系统的核心要素## Overview A calm, professional interface for a healthcare scheduling platform. Accessibility-first design with high contrast and generous touch targets. ## Colors 主色: #2563EB 辅色: #64748B 成功: #10B981 错误: #EF4444 ## Typography 标题: Inter, 24px, Bold 正文: Inter, 16px, Regular ## Components 按钮状态: Default / Hover / Active / Disabled 卡片结构: padding 16px, border-radius 8px这个格式有双重面孔Markdown 供人类阅读和编辑并维护结构化令牌structured tokens供机器执行[5]。如果你熟悉软件工程这本质上是在给设计系统写一个schema—— 不是像素级还原而是把设计意图抽象成可计算、可复用、可迭代的令牌体系。DESIGN.md 代表的不是「又一个设计工具」而是一种设计系统的新载体。它可以版本控制、可以跨工具流转、可以被 AI 编程工具直接读取。用建筑学的话来说DESIGN.md 就是设计系统的蓝图文件—— 不是施工图而是那个定义了比例、材质、语法的源文件。80 年代桌面出版革命PostScript 语言让打印机第一次能读取数字化设计指令设计师和印刷厂终于说同一种语言。今天的 DESIGN.md可能是设计工具与编程工具之间那堵墙第一次被彻底打通。谁真正受益Google 说无论你是想探索多种创意方向的专业设计师还是想把自己的第一个软件想法变成现实的创始人Stitch 都能帮你从想法到原型比传统方式快得多。[3]这句话里藏着真正的重点不是替代设计师而是让没有设计背景的人也能做出不像AI 垃圾的东西。Chris 在实测中发现DESIGN.md 最大的价值是拉升了最低设计质量底线[2]。一个不懂色彩理论、不懂字体层级的创业者只要用 Stitch 探索并导出 DESIGN.md再配合 Claude Code 执行就能得到一套相对专业的 UI 代码。这在以前是不可想象的。以前的设计工作流设计师用 Figma 出稿 → 开发者对照设计稿写代码 → 中间隔着沟通成本和理解偏差。DESIGN.md 之后设计师的输出物本身就是代码的输入物减少了翻译损耗。最大的受益者不是设计高手而是设计新手这也呼应了社区里常说的一句话AI编程使设计师和艺术家能够将个人经验和技术转化为实用工具。创作过程变得更加高效和创新不再是设计师的专利而是每个能用 AI 工具的人的共同能力。2天0代码做出你的AI应用#MIXLAB第27期AI编程训练营完整工作流拆解Chris 的实测流程是这样的[2]导入把已有的 AI 生成低质量 App 截图导入 Stitch生成用 prompt 参考图驱动 Stitch生成专业设计导出自动生成 DESIGN.md包含字体/色彩令牌/组件规则读取Claude Code 新建design.md粘贴设计系统重构让 Claude Code 参照设计规范重建 App UI进阶叠加 Stitch MCP直接读取 Stitch 画布上的 Frame 布局复制到代码结果字体匹配度约 80%色彩略有偏差但整体是可用的起点。这个工作流的核心价值在于AI 协同的分工边界Stitch 负责探索和迭代Claude Code 负责执行和重建。设计师不再需要手动标注像素也不需要写 PRDs 文件等待开发者排期。MCP在这里扮演了关键角色 —— 它是 Stitch 内置的服务器通过 skills 和 SDK 打通与 Claude Code、Cursor、Gemini CLI 的连接[6]。简单说MCP 是让设计工具和编程工具「对话」的协议层。边界与现实Gary 的批评并非没有道理。他的核心论点是单次 Prompt 的输出质量还很不够[1]。Stitch 的初始生成效果在 Gary 看来「远低于预期」。参考图引导后依然达不到专业水准。Voice Canvas 听起来很美但实测中 AI 的理解经常跑偏。这说明什么DESIGN.md 是工具不是魔法。它解决的是设计系统如何传递的问题不是「设计本身如何自动生成」的问题。如果你是一个没有设计眼光的人Stitch 生成的设计可能比你自己做的好一点但离专业水准还有差距。如果你是一个有设计经验的人Stitch 可以帮你快速探索多个方向但最终的选择和迭代还是需要你的判断力。我们依然处在一个设计眼光绝对重要的时代。还没到设计已死的地步。[1]设计师的新价值决策问责与T型人才生存指南一个新的起点回到最初的问题为什么 Gary 说中庸Chris 说「80%」答案在于他们测的是不同的东西。Gary 测的是AI 能否替代设计师Chris 测的是AI 能否把设计师的产出变成代码可消费的数据结构。第二个问题的答案更接近真相。DESIGN.md 的出现让设计系统第一次成为了 AI 编程工具可以读取、理解和执行的「源代码」。这不是设计工具的升级而是设计系统概念的一次范式转移 —— 从「设计师的私有资产」变成可以被版本化、被工具链流转、被 AI 执行的数字基础设施。对一人公司而言这意味着你可以用 Stitch 探索设计方向用 DESIGN.md 把设计系统沉淀下来用 Claude Code 直接生成代码。设计到代码的闭环第一次在一个人的工作流里真正跑通。但真正的机会不在于 Stitch 能否取代设计师而在于 DESIGN.md 能否让设计系统成为 AI 时代的源文件 —— 像代码一样可以版本控制、可以 Code Review、可以复用。设计已死的言论还早。但设计系统的「源文件化」趋势已经开始了。当产品经理和设计师开始写代码参考[1] YouTube - DesignCourse The New Google Stitch - Are Designers Finished?[2] YouTube - Google Stitch Claude Code Insane App Design[3] Google Blog - Design UI using AI with Stitch from Google Labs[4] Stitch Docs - What is DESIGN.md?[5] Stitch Docs - The DESIGN.md format[6] Stitch Docs - MCP Setup Authentication