文档

Design Extractor 的工作原理

粘贴网址，获取结构化的设计规范。颜色、字体排版、间距和组件都在一份 DESIGN.md 中，可以直接放进仓库。

什么是 DESIGN.md？

DESIGN.md 是一份纯文本的设计系统文档，人和 AI 智能体都能阅读。可以把它看作 AGENTS.md 在设计方面的对应物。AGENTS.md 告诉智能体如何构建项目，DESIGN.md 则告诉它们项目应该呈现怎样的外观和感觉。

每份 DESIGN.md 内部都有两层：包含机器可读设计令牌的 YAML front matter，以及解释设计理由的 Markdown 正文。令牌给智能体提供精确的数值，文字说明则告诉它们这些数值为什么存在。

阅读完整的 DESIGN.md 规范 ->

标准章节

  • Overview
  • Colors
  • Typography
  • Layout
  • Elevation & Depth
  • Shapes
  • Components
  • Do's and Don'ts

工作原理

  1. 输入

    粘贴一个公开网址（例如 design-extractor.com）。

  2. 提取

    系统会抓取页面，分析它的视觉属性：颜色、字体排版、间距、组件模式和整体设计语言。

  3. 输出

    一份 DESIGN.md，包含：

    • 概览和品牌风格指导
    • 带命名令牌的调色板
    • 字体排版层级和字体属性
    • 布局、间距和形状令牌
    • 组件指导和令牌引用
    • 作为设计护栏的“该做与不该做”

输出

每次提取生成一份 DESIGN.md。

Markdown

  • DESIGN.md。标准的 DESIGN.md 格式由 Google Stitch 推出。把它放进任意仓库，供 AI 智能体使用。

Chrome 扩展程序

无需回到这里，就能提取当前标签页中的页面。扩展程序沿用你在网站上的会话，消耗同一份积分。了解扩展程序的工作方式 ->

关键洞察

同时拿到精确的令牌和人类可读的设计理由时，AI 智能体能产出更好的设计。YAML front matter 提供精确数值，Markdown 正文说明这些数值在实践中应该如何使用。

准备好试试了吗？

从任意公开网址获取 DESIGN.md。每次提取至少需要一分钟。

提取网站