3 篇文章带有标签 “google-labs”

Google DESIGN.md 规范与实践指南

DESIGN.md是什么？

每个项目都有自己的视觉标识：颜色、字体、间距、组件样式。传统上，这些内容存储在 Figma 文件、品牌 PDF 或设计师的脑海中。AI 智能体无法读取这些格式。

DESIGN.md 改变了这一点。 它是一个纯文本设计系统文档，人类和智能体都可以阅读、编辑和执行。可以将其视为 AGENTS.md 的设计对应物：

文件 阅读者 定义内容
README.md 人类 项目是什么
AGENTS.md 编码智能体 如何构建项目
DESIGN.md 设计智能体 项目应该长什么样、什么感觉

它能给你带来什么

当像 Stitch 这样的设计智能体读取你的 DESIGN.md 时，它生成的每个屏幕都遵循相同的视觉规则：你的调色板、你的排版、你的组件模式。没有它，每个屏幕都是孤立的；有了它，它们看起来属于同一个产品。

DESIGN.md 是一个活的产物，而不是静态配置文件。它随着你的设计演变而演变。智能体生成它，你完善它，并在迭代过程中重新应用到屏幕上。

在底层，每个 DESIGN.md 都有两层：YAML 前置元数据包含机器可读的设计令牌（精确的十六进制值、字体属性、间距尺度）和Markdown 正文提供人类可读的设计原理说明。令牌为智能体提供精确值。散文告诉它们为什么这些值存在。完整的格式请参阅规范。

设计理念

DESIGN.md 规范是一个基础，而非规定。

translationdesign.mddesignagentgoogle-labscli
链接

DESIGN.md - 给智能体阅读的‘UI/UX 说明书’

要更好地理解 DESIGN.md 这个技术，你可以将其核心定位为：“专门给 AI 编码助手（AI Coding Agents）阅读的‘UI/UX 说明书’或‘设计系统提示词（System Prompt）’”。

以下是帮助你深度、立体理解这项技术的 5 个关键维度：

1. 理解它的核心痛点：为什么需要它？

在 DESIGN.md 出现之前，如果你对 AI 说“帮我写一个设置页面”，AI 会基于它在互联网上学习到的通用代码逻辑来生成 UI，这往往会导致：

  • 风格不一致：这次生成的按钮是圆角的，下次生成的变方了；页面 A 的蓝色和页面 B 的蓝色有色差。
  • 缺乏品牌感：生成出来的界面通常非常“大众脸（Generic）”，没有企业的品牌规范。
  • 难以约束：将复杂的 Figma 导出文件或厚重的 JSON 规范喂给 AI，往往因为上下文过大、格式不匹配导致 AI 理解偏差。

DESIGN.md 正是为了解决这个问题而诞生的。它给 AI 建立了一个持久的、结构化的上下文，让 AI 在写每一行 UI 代码前，都先翻看这本“规范指南”。

2. 掌握它的“双层结构”（核心机制）

DESIGN.md 的精妙之处在于它采用了人类与 AI 共同最擅长阅读的 Markdown + YAML 混合格式。它的文件结构分为两个图层：

  1. YAML Front Matter（机器可读层）：
  • 位于文件顶部，由 --- 包裹。
  • 内容：精密的“设计令牌（Design Tokens）”，如具体的颜色 Hex 码、字体大小缩放（Typography）、圆角大小（Rounded）、间距（Spacing）等。
  • 作用：让 AI 精准掌握规范的客观数值，防止 AI 在写 CSS 时“瞎编”参数。
design.md design agent google-labs ui

DESIGN.md - 面向智能体描述视觉识别系统的格式规范

一种用于向编码智能体描述视觉识别系统的格式规范。DESIGN.md 让智能体对设计系统拥有持久、结构化的理解。

格式

DESIGN.md 文件将机器可读的设计令牌（YAML 前置元数据）与人类可读的设计原理（Markdown 正文）相结合。令牌为智能体提供精确值，正文则解释这些值为何存在以及如何使用。

---
name: Heritage
colors:
  primary: "#1A1C1E"
  secondary: "#6C7278"
  tertiary: "#B8422E"
  neutral: "#F7F5F2"
typography:
  h1:
    fontFamily: Public Sans
    fontSize: 3rem
  body-md:
    fontFamily: Public Sans
    fontSize: 1rem
  label-caps:
// ...

读取此文件的智能体将生成一个 UI：Public Sans 字体的深墨标题、温暖石灰石背景，以及波士顿陶土色的行动号召按钮。

快速开始

对照规范验证 DESIGN.md，捕获损坏的令牌引用、检查 WCAG 对比度比率，并输出结构化发现——所有结果均以智能体可处理的 JSON 格式呈现。

translationdesign.mddesignagentgoogle-labscli