任意网页一键提取
DESIGN.md
30 秒生成 AI 可直接读懂的完整设计规范文档 —— 无需手动翻查 CSS，无需打开 DevTools
网页截图
DESIGN.md 输出
为什么需要 DESIGN.md 提取
手动拆解设计系统的三大痛点
临摹一个网站太费时间
手动打开 DevTools，逐一检查元素，记录颜色、字体、间距、动效，再整理成文档。整个过程耗时 1-3 小时，且容易遗漏细节。
给 AI 描述风格说不明白
和 Cursor、Claude 沟通时，"做成 Linear 那种风格"无法精确传达意图，导致 AI 生成的 UI 每次风格都不一样，来回返工。
竞品分析逐页截图标注
UI 设计师做竞品调研时，需要对多个产品的设计语言横向对比，逐页截图、标注、整理效率极低。
提取能力
六维设计信号，一次提取完整
配色方案
自动识别主色、辅助色、文字色、背景色、渐变色，并计算色值和对比度。
primary: '#635BFF' secondary: '#0A2540' accent: '#00D4AA' text: '#425466'
字体栈
提取完整的 font-family 层级、字重分布、字号系统和行高比例。
fontFamily: 'Inter, -apple-system' display: '64px / weight 600' headline: '32px / weight 500' body: '16px / 1.5'
间距系统
分析 padding、margin、gap 的规律，推导出基础单位和间距倍数系统。
baseUnit: '4px' space.1: '16px' space.2: '24px' space.3: '32px'
质感参数
提取阴影层级、圆角体系、边框风格、backdrop-blur 等视觉质感参数。
shadow: '0 8px 30px rgba(0,0,0,0.12)' borderRadius: '8px' border: '1px solid rgba(0,0,0,0.08)'
动效规范
采集 transition、animation 的时长、easing 曲线和交互反馈模式。
duration: '150ms' easing: 'cubic-bezier(0.4,0,0.2,1)' hover: 'border-color transition'
组件样式
识别 Button、Card、Input、Navigation 等关键组件的样式模式和变体。
Button: primary: 'bg-indigo-600 text-white' secondary: 'border-white/10' Card: glass: 'bg-white/[0.035] backdrop-blur'
多工具适配
一份 DESIGN.md，多处使用
Claude Code
将 DESIGN.md 放入项目根目录，Claude 读取后自动生成符合规范的 UI 代码
Cursor
粘贴到 .cursorrules 或上下文，让 Cursor 在编码时始终参考设计规范
Codex
作为 design skill 注入，Codex 在生成前端代码时自动应用设计系统
V0 / Lovable
上传 DESIGN.md 作为设计参考，AI 生成组件时保持风格一致性
实战案例
从真实网站提取的 DESIGN.md 长什么样？
对比优势
为什么选择 Design Extractor？
| 功能 | 手动拆解 | 开源工具 | Design Extractor |
|---|---|---|---|
| 安装方式 | 无需安装 | 开发者模式手动加载 | Chrome Web Store 一键安装 |
| 使用门槛 | 高（需懂 CSS） | 中高 | 零门槛，一键提取 |
| 提取速度 | 1-3 小时 | 约 1 分钟 | 30 秒 |
| 中文网站支持 | 依赖个人能力 | 部分支持 | 完整支持 |
| AI 流式输出 | 无 | 无 | 实时逐字渲染 |
| 截图辅助分析 | 手动截图 | 无 | 自动截取 3 张关键截图 |
| 自定义 API Key | 不适用 | 部分支持 | 支持任意 OpenAI 兼容 API |
| 已发布到 CWS | 不适用 | 否 | 是 |
常见问题
关于 DESIGN.md 提取
DESIGN.md 是一种描述网页设计系统的 Markdown 文件格式，包含配色、字体、间距、组件样式等规范。AI 编码工具（如 Claude Code、Cursor）可以直接读取该文件，生成风格一致的 UI 代码。
Free 套餐完全免费，你可以使用自己的 API Key 进行无限次分析。Pro 套餐（$5/月）提供 50 次平台额度，无需配置 API Key。Max 套餐（$20/月）提供 200 次额度，适合设计团队。
目前支持 Chrome 和基于 Chromium 的浏览器（Edge、Arc、Brave 等）。扩展采用 Manifest V3 标准，符合 Chrome 最新扩展规范。
Design Extractor 已正式发布到 Chrome Web Store，无需开发者模式即可一键安装。我们支持中文网站完整提取、AI 流式输出、自动截图辅助分析，且支持任意 OpenAI 兼容 API（Kimi、GPT-4o 等）。
完全可以。你可以将生成的 DESIGN.md 保存到项目根目录，Cursor 会自动读取；或者将内容粘贴到 .cursorrules 文件中，让 AI 在编码时始终参考设计规范。
完全支持。Design Extractor 可以分析任意语言的网页，包括中文、日文、韩文等。AI 会正确识别中文字体栈和排版参数。
非常安全。你的 API Key 仅存储在本地 chrome.storage.local 中，不会经过我们的服务器中转。扩展本身也无需联网（使用自定义 Key 时）。
可以。分析完成后，你可以一键复制到剪贴板，或下载为 {hostname}_DESIGN.md 文件保存到本地。