将任何网站的设计系统提取为 DESIGN.md 或 SKILL.md — 馈送到 Claude Code、Cursor 或 Codex。
**停止猜测颜色和字体。一键提取它们。**
DESIGN.md 生成器将任何网站变成一个干净的、可供代理使用的设计系统文档。单击任何页面上的扩展图标 - 您将在几秒钟内获得完整的“DESIGN.md”或“SKILL.md”。将其粘贴到 Claude Code、Cursor 或 Codex 中，您的 UI 会立即与源站点的视觉语言相匹配。
### 它提取什么
- **颜色** — 主要颜色、背景颜色、前景颜色、重音颜色、静音颜色（从计算样式中删除重复数据）
- **版式** — 标题/正文字体系列、尺寸比例、行高、粗细
- **间距** — 页面上实际使用的间距节奏（不是通用比例）
- **组件** — 按钮、卡片、具有实际半径/填充/边框标记的输入
- **阴影** — 具有真实 CSS 值的海拔高度
- **字体** — @font-face 声明及来源
- **CSS 自定义属性** — 在页面上声明的 `--var` 标记
### 专为 AI 编码代理而构建
每个输出都针对法学硕士进行格式化。 DESIGN.md 的结构使得 Claude Code、Cursor、Codex、Aider、Continue 和任何其他编码代理都可以直接使用它。 SKILL.md 变体附带 YAML frontmatter，准备放入 `.claude/skills/` 中。
### 隐私第一
- 无需登录
- 没有帐户
- 没有分析
- 没有数据收集
- 完全在浏览器中运行 - 在本地读取当前选项卡的计算样式，将其格式化为 Markdown，并将结果返回给您
### 非常适合
- 设计师对参考站点进行逆向工程
- 工程师克隆原型的视觉语言
- 希望自己的AI匹配特定品牌的代理用户
- 任何厌倦手动记下十六进制代码的人
### 如何使用
1. 打开任意网站
2. 单击工具栏中的“{ }”图标
3. 单击“**提取此站点的设计**”
4. 复制 DESIGN.md 或 SKILL.md 选项卡
5. 粘贴到您的 AI 编码代理中
### 公开透明
没有服务器。无跟踪像素。没有第三方脚本。源代码与网络版本一起存在于 https://designmd-generator-production.up.railway.app
由独立开发者制作。欢迎反馈。
