Design Swatches

一个包含183个DESIGN.md文件的数据集，每个文件对应一家真实公司，采用Google的token-first design.md格式（YAML + markdown，经过lint验证），用于为AI编码代理提供便携式视觉身份参考，包括可浏览的探索器和Claude Code技能。

A dataset comprising 183 DESIGN.md files, each of which corresponds to a real-world company and adopts Google's token-first DESIGN.md format (YAML + Markdown, lint-validated). This dataset is designed to provide portable visual identity references for AI coding agents, including a browsable explorer and Claude Code skills.

原始信息汇总

数据集概述：Design Swatches

• 数据集名称：Design Swatches
• 数据集页面：https://github.com/madebysan/design-swatches
• 主要用途：为AI编码代理提供便携式视觉身份参考，帮助AI生成特定品牌的用户界面。

核心内容

该数据集包含 183 个 DESIGN.md 文件，每个文件对应一家真实公司的视觉品牌形象，采用 Google 的 design.md 格式（YAML + Markdown）。此外，还包含一个可浏览的视觉画廊（包含 167 个渲染的色板）和一个 Claude Code 技能（用于生成新的 DESIGN.md 文件）。

数据集结构

design-swatches/ ├── getdesign-corpus-google/ # 183 个 DESIGN.md 文件（Google design.md 格式，YAML + markdown，经 lint 验证） ├── getdesign-corpus/ # 纯文本旧版语料库，作为源/参考 ├── explorer/ # 可浏览的 167 个渲染色板的视觉目录 │ ├── index.html # 可筛选的画廊（搜索、亮/暗模式、按类别和风格筛选） │ └── bentos/ # 每个渲染品牌的单个 HTML “色板” └── skill/design-md/ # 用于生成新 DESIGN.md 文件的 Claude Code 技能

DESIGN.md 文件结构

每个 Google 格式的文件包含两层：

• YAML 前置元数据（机器可读的令牌）：

  • colors — 不透明的 6 位十六进制颜色，按角色组织
  • typography — 包含 fontFamily、fontSize、fontWeight、lineHeight、letterSpacing 的命名令牌
  • spacing — 适合品牌的间距比例
  • rounded — 圆角比例
  • components — 带有如 {colors.primary} 令牌引用的变体

• Markdown 正文：

  1. 概述
  2. 颜色
  3. 排版
  4. 布局
  5. 层次与深度
  6. 形状
  7. 组件
  8. 注意事项
  9. 响应式行为
  10. 代理提示指南（Agent Prompt Guide — 可直接复制粘贴给AI代理用于构建品牌UI）

特色功能

• Claude Code 技能：位于 skill/design-md/，可接受任何 URL 并生成其对应的 DESIGN.md 文件。使用方式为将技能文件夹复制到 ~/.claude/skills/，然后在 Claude Code 会话中使用 /design-md https://your-company.com 命令。
• 数据来源：令牌通过 dembrandt 提取；格式遵循 Google 的 design.md 规范；多数语料文件从 VoltAgent 的 getdesign.md CLI 引导生成。

许可与归属

• 工具包（技能、探索器、脚本）：采用 MIT 许可证。
• DESIGN.md 文件：描述的是公共品牌视觉标识，其所有权归各自公司所有，此处仅作为参考编录，不得用于重新分发或产品用途。

搜集汇总

数据集介绍

构建方式

Design Swatches数据集以Google提出的token-first设计规范`design.md`为蓝本，系统性地将183家真实企业的品牌视觉体系转化为结构化的YAML令牌块与Markdown阐释相结合的文档。构建过程依托[dembrandt](https://github.com/dembrandt/dembrandt)工具从目标网站中抽取原始设计令牌，再通过Claude模型结合语料库中1至3份参考文件，以统一的解释性语调书写出涵盖色彩、排印、间距、圆角、组件等维度的完整文档，并经过`npx @google/design.md lint`严格校验格式合规性。

特点

该数据集的核心特色在于其双重架构：机器可读的YAML令牌层提供了精准的颜色、字体、间距等原子化设计参数，而Markdown正文则从色彩到组件规则逐层展开，并独创性地设有“Agent Prompt Guide”章节，直接输出可供AI代理复制粘贴以生成品牌化界面的提示词。183份文档覆盖从Ferrari到Notion、从A24到Claude等跨度极大的视觉风格，验证了该格式在不同品牌间迁移与复现的鲁棒性。与之配套的视觉浏览器将167个色样渲染为可交互的界面片段，方便设计师直观检索与参考。

使用方法

使用者可通过两种途径利用该数据集：一是直接浏览部署在[设计探索器](https://designmd.santiagoalonso.com)上的过滤式画廊，按类别、风格或关键词检索品牌视觉样本，将其作为撰写自有品牌DESIGN.md文件的语调参考。二是将`skill/design-md/`文件夹复制至`~/.claude/skills/`目录，在Claude Code会话中执行`/design-md https://your-company.com`命令，技能会自动爬取目标站点的令牌，并以语料库的语调风格输出一份符合Google规范的`design.md`文档，该文档可直接嵌入AI代理的上下文或导出用于下游设计工具。

背景与挑战

背景概述

Design Swatches数据集由独立研究者Santiago Alonso于近年创建，旨在解决AI编码代理在生成用户界面时普遍缺乏品牌视觉一致性的问题。该数据集核心包含183份按Google官方design.md格式（YAML+Markdown）整理的品牌设计系统文件，涵盖Ferrari、Notion等知名企业的视觉标识。研究团队通过自研工具dembrandt提取原始设计令牌，并采用基于范例的提示工程方法，将抽象的令牌数据转化为结构化的品牌设计简报。这一创新格式弥合了传统设计工具（如Figma）与大型语言模型之间的鸿沟，使得AI代理能基于单一文档重建可信的品牌界面，对推动AI辅助设计领域的发展具有重要影响。

当前挑战

该数据集面临的核心挑战在于，企业设计系统常嵌于封闭的专有工具（如Figma）或非标准化的JSON格式中，缺乏可直接供语言模型解析的通用表达方式，导致AI代理难以精准复现品牌视觉特征。构建过程中，研究人员需将183个品牌的松散设计规范转化为统一的design.md格式，面临品牌间风格差异巨大、令牌定义不统一的技术难题。此外，需平衡机器可读的YAML令牌与自然语言描述的分寸，确保设计系统既结构严谨又富含上下文语义。数据集的法律边界亦存挑战——所有设计文件描述的是公开品牌标识，受版权保护，仅作为参考而非可复用资产，这限制了数据的二次开发与商业应用。

常用场景

经典使用场景

在当下大模型驱动的代码生成领域，AI编码代理常因缺乏精准的视觉设计指引而产出千篇一律的界面。Design Swatches数据集的核心应用场景是作为AI编码代理的便携式视觉身份参考库，为这些代理提供结构化的品牌设计系统描述。它通过Google提倡的design.md格式，将品牌视觉身份转化为既包含YAML令牌又涵盖文字说明的标准化文档，使得代理人仅凭这一文档就能重建出风格一致的界面。开发者既可直接调用183个真实公司的设计文件作为参照，也可利用配套的Claude Code技能从任意URL自动生成同类文件，从而在代码生成过程中嵌入品牌特有的色彩、字体、间距等设计语言，从根本上提升输出界面与目标品牌间的视觉契合度。

衍生相关工作

Design Swatches数据集并非孤立存在，而是建立在多项开源成果之上并催生了新实践。其底层的令牌提取依赖dembrandt工具，该工具能从网站CSS中识别色彩使用频率，但缺乏语义解读；而本数据集在此基础上通过大模型将原始令牌转化为带有品牌诠释的设计描述，形成了‘原始令牌+AI解读’的复合工作流。同时，Google官方design.md格式规范的提出也为相关领域提供了标准化模板。围绕该数据集，衍生出借助其一至多个样本作为‘语音参考’来指导新品牌描述生成的示例驱动提示技术，以及利用‘代理提示指南’字段直接嵌入AI构建指令的实践。这些工作共同推动了从纯视觉直觉到结构化设计知识的范式转变，为后续研究提供了可复用的方法框架。

数据集最近研究

最新研究方向

在AI驱动的界面生成领域，Design Swatches数据集通过构建183个真实品牌的DESIGN.md设计令牌语料库，开创性地解决了AI编码智能体输出界面风格同质化的难题。该研究聚焦于将散落于Figma、Storybook等封闭工具中的视觉身份系统，转化为结构化的、可直接粘贴至大语言模型对话的便携式设计规范。结合dembrandt令牌提取工具与Claude Code技能，算法可从任意企业站点URL自动生成符合Google官方design.md格式的完整设计系统，包含色彩、排版、间距等机器可读令牌及配套的代理提示指南。这一范式推动AI开发工具从生成通用界面跃升至精准复刻品牌视觉DNA，在Ferrari、Notion、A24等风格迥异的品牌测试中验证了其跨领域适应性，为AI自动化设计流程的标准化与品牌一致性管控提供了可落地的规模化解决方案。