提取颜色
识别主色、强调色、背景色、文字色、边框色和 CSS 变量。
Chrome / Edge 插件 · 标准 DESIGN.md 中文版
把任意网页的设计
把任意网页的设计
提取成标准 DESIGN.md
DESIGN.md 是给 Cursor / Claude Code / Codex 等 AI 编程工具读取的设计系统文档。它把当前页面的真实 DOM 样式、设计 tokens 和组件规则整理成一个项目文件：上半部分是英文 YAML tokens，下面用中文解释颜色、字体、间距、圆角和组件使用规则。
- 为什么要生成 DESIGN.md？
- 因为 AI 需要的不是一句“参考这个网站”，而是一套明确的设计规则。DESIGN.md 会把网页的颜色、字体、布局、组件、交互状态和视觉风格写成可读、可改、可追踪的文档。它进入项目之后，就能持续约束 AI 的输出，让后续页面更一致、更可控。这就是 DesignMD 和普通网页参考的区别：
新设备赠 3 次完整导出
无需注册登录
读取真实样式，非截图猜测
Extract
把真实网页样式，整理成 AI 能读懂的设计规则
插件直接读取 DOM、computed styles 和 CSS variables，提取一份结构化的设计系统摘要，而不是对截图做猜测。
提取字体
整理 H1、H2、正文、按钮和导航文字的字号、字重、行高。
提取间距
归纳 padding、margin、gap、section spacing 和常用 spacing scale。
圆角和阴影
区分按钮、卡片、输入框、徽标等组件的 radius 和 shadow。
识别组件
识别 Button、Card、Navigation、Hero、Badge、Form 等常见组件模式。
生成标准 DESIGN.md
只导出一份 DESIGN.md：顶部是英文 YAML tokens，正文是中文设计说明。
Workflow
四步用起来
新用户赠送 3 次完整导出额度。额度用完后，仍然可以继续分析网页并查看设计系统预览。
打开一个喜欢的网站
选择你想参考视觉风格的网页。
点击插件分析
插件只在你主动点击时读取当前页面样式。
生成标准 DESIGN.md
有额度时才调用后端生成标准文档并扣除 1 次额度。
复制到 AI 编程工具
把 DESIGN.md 放进 Cursor / Claude Code / Codex 使用。
Pricing
免费试用，按需付费
完整导出包括生成标准 DESIGN.md、复制完整内容和下载 DESIGN.md 文件。
免费试用
0元 · 3 次
- 每个新设备自动获得 3 次
- 用完仍可分析并查看预览
- 无需注册登录
包月会员
¥19100 次 + 一个月会员
- 购买后获得专属激活码
- 插件内一键兑换、自动绑定设备
- 含一个月会员身份，适合日常高频使用
永久版（自带模型）
¥9.9早鸟价 · 限量前 10 份（原价 ¥99）
- 限时早鸟，仅前 10 份，售完恢复原价
- 解锁「自定义模型 / BYOK」，用你自己的 API Key 生成
- 支持 OpenAI / DeepSeek / Qwen 等 OpenAI 兼容接口
- 用自己的模型生成不再消耗云端额度，另赠送 10 次云端额度
- API Key 只保存在本机浏览器，不上传服务器
Activate
购买激活码
添加微信购买激活码：zyh18278163656。购买时不需要提供设备码，拿到激活码后在插件里兑换即可，插件会自动绑定当前设备。
zyh18278163656
如无法添加，可尝试备用联系方式：zyh1827863656
使用过程中有任何问题、bug 或建议，也欢迎加微信反馈：zyh18278163656。
什么是设备码？
设备码是插件为当前浏览器生成的唯一识别码，用来绑定免费额度和激活码兑换记录。正常购买时不需要把设备码发给我，只有激活失败、换电脑迁移或客服排查时才需要查看设备码。
如何使用激活码？
打开插件，在「输入激活码」区域粘贴你收到的激活码，点击「兑换」。未绑定的激活码会自动绑定当前设备；已绑定当前设备的激活码可以继续使用；已绑定其他设备的激活码会被拒绝。
Install
安装插件
本地版本可在 Chrome / Edge 的扩展管理页选择「加载已解压的扩展程序」，目录选择项目里的 extension 文件夹。
打开 chrome://extensions 或 edge://extensions，开启开发者模式，加载 extension 目录。后端默认地址为 http://127.0.0.1:8787。
FAQ
常见问题
这个工具是做什么的？
从当前网页中提取颜色、字体、间距、圆角、阴影和组件规则，并生成 AI 编程工具可读的 DESIGN.md。
DESIGN.md 有什么用？
放进 Cursor、Claude Code、Codex 等工具中，让 AI 在生成页面时参考这个设计系统。
它是截图识别吗？
核心是读取网页真实样式（DOM、computed styles、CSS variables）。生成时会额外附带一张当前页面可视截图，仅作为视觉风格参考，精确数值仍以真实样式为准。
免费可以用几次？
新用户赠送 3 次完整导出额度。
免费次数用完还能用吗？
可以继续分析网页和查看设计系统预览，但不能继续生成标准 DESIGN.md。
永久版的「自定义模型」是什么？
永久版解锁 BYOK（自带 API Key）：你在插件设置里填自己的 OpenAI 兼容接口（OpenAI / DeepSeek / Qwen 等），插件直接用你的模型生成 DESIGN.md，不再消耗云端额度。
我的 API Key 安全吗？
API Key 只保存在你本机浏览器的扩展存储中，模型请求由插件本地直连你填写的接口完成，不会经过我们的服务器，也不会上传。请勿在公共电脑上保存 API Key。
支持哪些浏览器？
第一版优先支持 Chrome 和 Microsoft Edge。