一键提取任何网站的设计系统——颜色、字体、间距、阴影——生成 DESIGN.md，供 AI 编码助手使用。
不必再手动逆向工程竞品网站。
DESIGN.md Extractor 读取你打开的任意页面上的实时计算样式，把它们锻造成一份由 token 驱动的 Markdown 文件——你的 AI 编码代理 Claude Code、Cursor、Codex、Stitch、Aider 可以直接放进项目里使用。
不要截图。不要"做得像 figma.com 那样"的提示词。不靠感觉。全是真实数字。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
▎ 它做什么
针对当前激活的 tab 运行五阶段探测：
1. SiteProfiler — 采样可见元素，按出现频率加权
2. TypographyForge — 提取 font stack、字号阶梯、字重、tracking
3. ColorForge — 调色板、surface/ink 角色、强调色、对比度
4. SpacingForge — 基础单位、间距阶梯、gutter 节奏
5. ShapeForge — 圆角 radii、细线、阴影配方
结果会写入两个通道之一：
• DESIGN.md — 一份可提交到仓库的设计系统蓝图
• SKILL.md — 一份代理就绪的 skill 文件，带 frontmatter 和
managed-block 标记（原样放入 .claude/skills/、
.agents/skills/ 或 .cursor/skills/ 即可）
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
▎ 它为什么存在
每一句"做一个像 Linear 那样的落地页"提示词都会损失 90% 的视觉信号，因为 LLM 从未见过真实像素。截图有点用，但在代码里工作的代理想要的是代码形态的输入：hex 码、rem 值、cubic-bezier、命名 token。
DESIGN.md Extractor 给它们的，正是这些——以它们早已熟悉的文件格式。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
▎ 工作流
1. 打开任意你想学习的页面。
2. 点击扩展图标。探测会自动运行。
3. 选择 CHANNEL：DESIGN.md 或 SKILL.md。
4. COPY 到剪贴板、EXPORT 为文件，或 QUICK INSTALL 直接安装到项目根目录——
扩展会为 Claude Code、Codex 或 Cursor 自动选择正确的目录。
5. 打开 SPEC SHEET 查看每个 token 究竟是由哪些 selectors 提供的，
这样你可以审查、调整或质疑输出。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
▎ 为以下人群设计
✓ 交付 AI 辅助功能的前端工程师
✓ 把 tokens 交给编码代理的设计师
✓ 快速克隆视觉参考的独立开发者
✓ 任何厌倦了往聊天框里粘贴"用这些颜色：#..."的人
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
▎ 输出字节级兼容
输出与上游开源 schema（design-md-chrome）保持一致——任何能读取一个 extractor 产生的 DESIGN.md 的工具，都能读取我们的。我们额外加上了：
• 带正确 frontmatter 与 managed blocks 的 SKILL.md 通道
• 面向三大代理 toolchain 的 quick-install 路由
• 一份解释 forge 的 SPEC SHEET——没有黑盒魔法
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
▎ 隐私
• 无埋点。无追踪像素。无遥测。
• 探测仅在你点击的 tab 上运行——绝不在后台运行。
• 页面内容在进程内读取；除了用于登录的邮箱（由 ExtPay 处理计费）
之外，不会上传任何东西。
• 你可以随时登出并卸载；本地状态会被清除。
完整政策：见上架页面中的 Privacy Policy 链接。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
▎ 免费与付费
• 免费：每月慷慨的探测额度——足够评估使用。
• 付费：无限次探测、优先支持。计费由 ExtensionPay 处理。
• 一次性邮箱注册；我们的服务器不存储银行卡。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
▎ 不是你要找的？
• 这**不是** inspector——一次性测量请用 DevTools。
• 这**不是** Figma 插件——它读取的是实时网页。
• 这**不是** 截图工具——输出是结构化文本，不是图片。
