DESIGN.md 模板中心

获取 DESIGN.md 模板的两种方式

模板库

浏览现成模板

从 Apple、Stripe、Linear 等 50+ 顶级品牌获取标准化 DESIGN.md，一键复制即可使用。

Cl
Op
Co
Mi
Li
Ve
+12

50+ 品牌模板 · 7 大行业分类

生成器

从任意网站生成

输入网址，30 秒内自动提取配色、字体、组件规范，生成完整的 DESIGN.md 文档。

无需注册，安装扩展即可使用

工作流程

三步生成专属模板

不需要手动整理 CSS，不需要翻阅开发者工具

01
1

打开任意网页

在 Chrome 中访问你想分析的网站，支持任何公开 HTTPS 页面

02
2

一键分析

点击扩展图标，AI 自动采集 CSS 变量、字体栈、配色方案和组件样式

03
3

下载文档

获取结构化的 DESIGN.md 文件，可直接用于 AI 代码生成或设计参考

输出预览

看看生成的文档长什么样

标准化 Markdown 格式，AI 和人类都能读懂

DESIGN.md
---
name: Example Design System
version: 1.0.0
---

# Design Thinking
- **Purpose**: A dark-themed SaaS dashboard for data visualization
- **Style**: Cyber-minimal with indigo accents
- **Constraints**: React + Tailwind, accessible WCAG 2.1 AA

# Overall Atmosphere
## Design System
### 1. Core Style
Deep void backgrounds with layered glassmorphism. Technical precision through monospace code previews and structured grid layouts.

### 2. Color Palette
| Role | Hex | Usage |
|------|-----|-------|
| Background | #0A0A0F | Primary canvas |
| Surface | #12121A | Cards, panels |
| Primary | #6366F1 | CTAs, accents |
| Text Primary | #FFFFFF | Headlines |
| Text Secondary | #9CA3AF | Body copy |

### 3. Font Stack
- Display: Georgia, serif
- Body: SF Pro Display, sans-serif
- Code: JetBrains Mono, monospace

### 4. Component Guidelines
**Button Primary**
- bg: #6366F1
- text: white
- radius: 9999px
- padding: 12px 24px

**Card Glass**
- bg: rgba(255,255,255,0.035)
- border: 1px solid rgba(255,255,255,0.1)
- blur: backdrop-blur-md

### 5. Motion Design
- Micro-interactions: 150ms ease
- Hover border: indigo-300/35
- Page transitions: 300ms cubic-bezier(0.4,0,0.2,1)

常见问题

关于 DESIGN.md 模板

DESIGN.md 是一种纯文本设计系统文档，由 Google Stitch 推广。它用 Markdown 格式记录网站的配色、字体、间距、组件规范等设计决策，让 AI 编码助手（如 Cursor、GitHub Copilot）能够生成与参考网站风格一致的 UI 界面。

awesome-design-md 是一个 GitHub 仓库，只提供人工整理的预置品牌模板（约 68 个）。而 Design Extractor 可以分析任意网站并自动生成 DESIGN.md，不受预设清单限制。我们也提供热门品牌的现成模板作为快速起点。

免费版用户可以绑定自己的 OpenAI 兼容 API Key（如 Kimi、GPT-4o），进行无限次分析。如果你不想配置 API Key，可以选择 Pro 套餐（$5/月，50 次）或 Max 套餐（$20/月，200 次），直接使用平台额度。

我们的扩展会采集页面的 CSS 变量、计算样式、字体族、颜色值、阴影和渐变参数，同时截取三张页面截图（顶部 / 35% / 70%）供 AI 综合分析。生成的文档覆盖配色方案、字体栈、组件规范、布局原则和复刻指南，准确度足以指导 AI 生成高保真还原的界面。

Google Stitch 是最早推广 DESIGN.md 概念的产品，但其格式仅适用于 Stitch 平台。我们的输出兼容 Stitch 格式，同时进行了扩展，增加了组件状态、响应式断点、Do's and Don'ts 等更全面的设计规范章节，适用于任何 AI 编码工具。

目前支持 Google Chrome 和所有基于 Chromium 的浏览器（Edge、Arc、Brave 等）。Firefox 和 Safari 版本正在开发中。扩展采用 Manifest V3 标准，无需额外运行时依赖。

可以。由于扩展运行在你的本地浏览器中，它能够访问你已登录的所有页面（包括内网、后台管理系统、本地开发环境）。数据仅在本地处理，不会上传到我们的服务器，确保隐私安全。

通过 Design Extractor 自动生成的 DESIGN.md 是对目标网站公开可见设计元素的客观记录（颜色值、字体名称、间距数值等），你可以自由使用这些设计 token 来指导自己的设计工作。但我们建议仅将其作为参考和灵感来源，而非直接复制品牌标识或专有视觉资产。

开始生成你的专属模板

安装 Chrome 扩展，30 秒内从任意网站提取设计规范