Design Extractor Chrome 扩展程序
Design Extractor 的 Chrome 扩展程序把你当前标签页中的网站转换成 DESIGN.md：一个设计系统文件，包含网站的颜色、字体排版、间距、形状和组件规则，专为 Claude Code、Cursor 和 Copilot 等编程智能体编写。在工具栏中点一下即可，无需粘贴网址。
免费安装。每次提取会从你的预付余额中扣除积分，价格与网站上相同。
功能
从当前标签页生成 DESIGN.md
提取当前标签页中的页面
点一下，就会把当前标签页的地址提交到与首页表单相同的提取流程。Pro 还会抽样网站的关键页面，因此结果反映的是整个网站，而不只是一个页面。
生成完整的设计系统
颜色、字体排版、间距和形状的 YAML 令牌，以及 DESIGN.md 格式的八个章节：Overview、Colors、Typography、Layout、Elevation and Depth、Shapes、Components 和 Do's and Don'ts。
每个组件都有配方
它从页面中挑选的组件，比如页头、按钮、输入框和卡片，每个都以精炼的 HTML 和 CSS 交付，并与实时网站进行核对，或标注原因。
同一个账户，同一份积分
扩展程序沿用你在 design-extractor.com 上的会话。无需再次登录，弹出窗口会显示你的积分余额。
工作原理
从标签页到 DESIGN.md，只需三步
添加到 Chrome 并固定
从 Chrome Web Store 安装，并通过拼图图标把它固定到工具栏。它只请求访问 design-extractor.com 和当前标签页，别无其他。在网站上登录一次即可，弹出窗口会使用这个会话。
打开一个公开页面，点击 Extract this page
在弹出窗口中选择档位并开始提取。提取过程中，弹出窗口会显示进度，你可以继续浏览。
打开 DESIGN.md
点击 Open result 即可前往网站上的 DESIGN.md。它也会保存在“我的提取”中，你可以在那里复制、下载或编辑，然后放进你的仓库。
对比
相比 TypeUI 的 DESIGN.md Style Extractor 多了什么
TypeUI 的 DESIGN.md Style Extractor 是一款免费、开源的扩展程序，它会用当前标签页中页面的样式填充 TypeUI 自己的模板。Design Extractor 的扩展程序额外提供：
遵循 Google 规范的 DESIGN.md
令牌位于 YAML front matter 中，标准章节按规范顺序排列。任何文件都可以用免费的 DESIGN.md 校验器检查。
为挑选出的每个组件提供配方
页头、按钮、输入框、卡片等组件的精炼 HTML 和 CSS，每个都通过结构匹配和像素对比与实时网站进行核对，或标注原因。
地区受限的网站
当网站屏蔽某些国家的访问者时，提取可以通过另一个国家的浏览器进行。从其他国家提取的费用为 Pro 价格加 6 积分附加费（共 16 积分）。
与网站相同的账户和积分
每次提取都保存在“我的提取”中，你可以在那里编辑、复制或下载，你的智能体也可以通过 MCP 读取。
核实于 ，依据其 0.4.0 版本、README 和源代码以及 Chrome Web Store 页面。
| 对比项 | Design Extractor | TypeUI DESIGN.md Style Extractor |
|---|---|---|
| 如何读取网站 | 我们的服务器在浏览器中打开页面地址，并分析渲染后的页面。Pro 还会抽样网站的关键页面。 | 在你的浏览器内，读取当前标签页中页面上最多 280 个可见元素的计算样式。 |
| 输出遵循什么 | Google 的 DESIGN.md 规范：令牌位于 YAML front matter 中，标准章节按规范顺序排列。 | TypeUI 自己的 DESIGN.md 模板（Mission、Brand、Style Foundations、Rules 等），没有 YAML front matter；或者一个 SKILL.md。 |
| 组件 | 为从页面中挑选的每个组件提供精炼 HTML 和 CSS 配方，通过结构匹配和像素对比与实时网站进行核对，或标注原因。 | 在通用组件指南下列出每种组件类型的数量。输出不会与渲染页面进行比对。 |
| 结果保存在哪里 | 保存在网站上的“我的提取”中，你可以在那里编辑、复制或下载。 | 显示在弹出窗口中，你可以复制，或下载为文件。 |
| 可读取的页面 | 仅限公开页面。暂不支持需要登录的页面、localhost 上的页面或私有网络中的页面。 | 当前标签页中打开的页面，包括你已登录的页面，因为它直接读取该页面。 |
| 价格 | 免费安装。提取会消耗预付积分。 | 免费且开源（MIT）。 |
如果你需要遵循 Google 规范的 DESIGN.md，为每个组件提供与实时网站核对过的配方，并保存到你的账户中，请选择 Design Extractor 的扩展程序。完整对比请见 TypeUI vs Design Extractor。
常见问题
Chrome 扩展程序常见问题
关于安装扩展程序、它会发送什么以及费用的简短解答。
安装是免费的。每次提取会从你的预付余额中扣除积分，价格与网站上相同。积分包最低 US$5 购买 50 积分，无需订阅，积分永不过期。如果因为我们这边的原因提取失败，积分会被退还。
在你点击 Extract this page 时，只发送当前标签页的地址和你选择的档位。它从不读取页面内容，不会在你访问的页面上后台运行，也不包含任何分析统计。
暂不支持。我们的服务器根据页面地址抓取页面，因此页面必须是公开的。不支持需要登录的页面、localhost 上的页面或私有网络中的页面。扩展程序仅适用于 Chrome。
不需要。弹出窗口沿用你在 design-extractor.com 上登录的会话。未登录时，它会显示一个 Sign in 按钮，点击后打开网站。在弹出窗口中退出登录，也会同时退出网站的登录。
任何能读取你仓库中文件的智能体。把 DESIGN.md 保存在代码旁边，让 Claude Code、Cursor、GitHub Copilot、Codex、Windsurf 或 Google Stitch 把它当作新界面的样式参考。
TypeUI 的 DESIGN.md Style Extractor 等扩展程序会在你的浏览器中读取计算样式，并把这些值填入它们自己的模板。Design Extractor 生成遵循 Google 规范的 DESIGN.md，为从页面中挑选的每个组件提供 HTML 和 CSS 配方，与实时网站进行核对或标注原因，并保存到你的账户中。