获取网站的 Design.md
任意网页，30 秒生成 AI 可直接读懂的完整设计规范文档 —— 无需手动翻查 CSS，无需打开 DevTools
获取流程
三步获取任意网站的设计规范
Step 01
打开目标网页
在 Chrome 中打开你想分析的网站，支持任意公开网页
Step 02
点击分析按钮
扩展自动截取 3 张关键截图，提取 CSS 变量、字体栈、配色方案
Step 03
获取 DESIGN.md
AI 流式生成结构化设计文档，一键复制或下载为 .md 文件
输出预览
真实的 DESIGN.md 长什么样？
网页截图
Linear Homepage
Screenshot preview
DESIGN.md 输出
1---2name: Linear Design System3version: 1.0.04---56# Core Style7Dark cyber-SaaS: deep void backgrounds8with indigo glow accents.910## Color Palette11- background: #0a0a0a12- surface: rgba(255,255,255,0.04)13- primary: #6366f114- textPrimary: rgba(255,255,255,0.9)1516## Typography17- display: SF Pro Display, 48px, 30018- body: Inter, 14px, 1.5
方案对比
为什么混合分析方案更准确？
纯 CSS 分析
精确但死板
- 能提取精确色值和尺寸
- 无法感知视觉层次和氛围
- 输出像代码注释，缺乏设计语感
- 适合 1:1 复刻，不适合学习借鉴
Design Extractor
- 截图多模态分析 + CSS 提取 + 组件识别
- 保留原网站的视觉神韵和氛围
- 输出符合 Google Stitch 标准格式
- AI 可直接读取并生成一致风格
纯截图分析
有感但不准
- 能捕捉视觉风格和氛围
- 色值和尺寸不够精确
- 可能遗漏隐藏交互状态
- 适合灵感参考，不适合精确复刻
工具兼容
一份 DESIGN.md，多处使用
Claude Code
将 DESIGN.md 放入项目根目录，Claude 自动读取并生成符合规范的 UI
# 项目根目录放置 DESIGN.md claude """根据 DESIGN.md 生成登录页面"""
Cursor
粘贴到 .cursorrules，让 Cursor 编码时始终参考设计规范
# 在 .cursorrules 中添加 Always reference DESIGN.md for styling decisions.
Google Stitch
直接上传 DESIGN.md 作为设计系统，Stitch 自动应用到所有生成页面
// Stitch 自动识别项目中的 DESIGN.md // 无需额外配置
Codex / GPT-4o
作为 system prompt 注入，AI 生成前端代码时自动应用设计系统
# Prompt 开头附加 DESIGN.md 内容 # 后续所有生成遵循该规范
使用场景
谁需要获取网站的设计文档？
独立开发者
快速复刻喜欢的 UI 风格
看到某个产品的界面很漂亮，用 Design Extractor 拿到设计规范，直接喂给 Cursor 或 Claude 生成同款界面，省去数小时的手动测量。
UI 设计师
竞品设计语言拆解
做竞品分析时，对多个产品各生成一份 DESIGN.md，并排对比配色、字体、间距系统，快速发现设计趋势和差异化机会。
前端开发者
把"那种感觉"变成精确规范
产品说"做成 Notion 那种感觉"，不再靠猜。用 Design Extractor 导出客观量化的设计参数，减少主观判断带来的返工。
常见问题
关于获取网站 Design.md
DESIGN.md 是一种描述网页设计系统的 Markdown 文件，包含配色、字体、间距、组件样式等规范。获取网站的 DESIGN.md 后，你可以直接将其喂给 Claude Code、Cursor 等 AI 工具，让 AI 按照该规范生成风格一致的界面，避免"AI 设计开盲盒"。
Free 套餐完全免费，使用你自己的 API Key 可进行无限次分析。Pro 套餐（$5/月）提供 50 次平台额度，无需配置 API Key。Max 套餐（$20/月）提供 200 次额度，适合团队高频使用。
从点击"分析"到拿到完整的 DESIGN.md 文档，通常只需要 30 秒。扩展会自动截取 3 张页面截图，提取 CSS 变量、字体栈、配色方案，由 AI 流式生成结构化文档。
完全支持。Design Extractor 可以分析任意语言的网页，包括中文、日文、韩文等。AI 会正确识别中文字体栈、排版参数和视觉层次。
完全可以。将生成的 DESIGN.md 保存到项目根目录，Cursor 和 Claude Code 会自动读取；或者将内容粘贴到 .cursorrules 文件中，让 AI 在编码时始终参考设计规范。
手动复制 CSS 只能拿到零散的颜色和尺寸数值，缺乏整体的设计语境。Design Extractor 结合截图多模态分析 + CSS 提取 + 组件识别，输出的是一份有结构、有语境、AI 可直接理解的完整设计系统文档，复刻效果更接近原站神韵。
非常安全。你的 API Key 仅存储在本地 chrome.storage.local 中，不会经过我们的服务器中转。扩展本身也无需联网（使用自定义 Key 时），保证数据安全。
可以。分析完成后，你可以一键复制到剪贴板，或下载为 {hostname}_DESIGN.md 文件保存到本地。生成的文件是标准 Markdown 格式，可以在任何支持 Markdown 的编辑器中打开和编辑。