TypeUI vs Design Extractor

TypeUI 的 DESIGN.md Style Extractor 是一款免费的 Chrome 扩展程序，它读取你标签页中页面的样式，并填充 TypeUI 自己的 DESIGN.md 模板。Design Extractor 的文件遵循 Google 的 DESIGN.md 规范，并把从页面中挑选的每个组件以 HTML 和 CSS 配方的形式交付，供你的编程智能体重建。每个配方都会与实时网站进行核对，或标注原因。它也支持只响应特定国家访问者的网站。

刚接触这个格式？请先阅读什么是 DESIGN.md。

核实于 ，依据该扩展程序的 README 和源代码、其 Chrome Web Store 页面和TypeUI 的 README。服务内容和价格可能会变化，做决定前请查看对方网站。

为什么选择 Design Extractor

  • 遵循 Google 的 DESIGN.md 规范

    YAML front matter 只使用规范定义的属性，没有自定义的顶层键。标准章节按规范的顺序排列，从 Overview 到 Do's and Don'ts。front matter 中的组件条目只使用规范规定的八个属性，并使用字面值。任何文件都可以用免费的 DESIGN.md 校验器检查。

  • 为从页面中挑选的每个组件提供配方

    从页面中挑选的页头、页脚、按钮、输入框、卡片和其他组件，每个都以配方的形式交付：位于 DESIGN.md 的 Components 章节中、使用字面值的精炼 HTML 和 CSS。每个配方都列出了它的组成部分，以及在网站上观察到的悬停和聚焦状态，让你的编程智能体可以重建组件，而不必去猜。

  • 与实时网站核对

    每个配方都会被单独渲染，并与实时网站进行核对：将渲染出的各部分与页面上测得的数据做结构匹配，并与真实元素的最新截图做像素对比。未通过的配方会被重建并再次检查。仍未通过的配方会标注原因，绝不会作为已验证的配方交付。结果页会显示组件的匹配程度，以及覆盖了网站多少颜色和文字样式：请看示例库中的 Stripe。

  • 支持地区受限的网站

    有些网站只响应来自特定国家的访问者。当提取因此失败时，结果页会提供国家选择器，优先列出已发现可以加载该页面的国家，并通过你所选国家的浏览器运行同样的提取。从其他国家提取的费用为 Pro 价格加 6 积分附加费（共 16 积分）。如果提取失败，我们会退还你的积分。

并排对比

TypeUIDesign Extractor
规范符合度不提供遵循 Google 的 DESIGN.md 规范：front matter 只使用规范的属性，没有自定义的顶层键；标准章节按规范的顺序排列；组件条目仅限规范规定的八个属性，并使用字面值。
组件配方组件以每种类型的数量（按钮、链接、输入框、卡片、导航、列表、表格）呈现，并附有通用的组件指导。从页面中挑选的每个组件，比如页头、页脚、按钮、输入框和卡片，都以配方的形式交付：Components 章节中的精炼 HTML 和 CSS，供你的编程智能体重建。
与实时网站核对不提供是。每个配方都会被单独渲染并与实时网站核对：对其各部分做结构匹配，并做像素对比。未通过的组件会标注原因，绝不会作为已验证的组件交付。
地区受限的网站不提供是。当网站屏蔽某些国家的访问者时，失败的提取会提供国家选择器，优先列出可以加载该页面的国家，并通过那里的浏览器运行同样的提取。从其他国家提取的费用为 Pro 价格加 6 积分附加费（共 16 积分）。
是什么DESIGN.md Style Extractor，一款由 TypeUI 的开发商 Bergside SRL 推出的免费 Chrome 扩展程序。版本 0.4.0，在 Chrome Web Store 上约有 40,000 名用户，以 MIT 许可证开源。一个生成器：在网站上、通过 MCP 或从 Chrome 扩展程序给它一个公开网址，即可获取该网站的 DESIGN.md。
输出遵循什么TypeUI 自己的 DESIGN.md 模板：Mission、Brand、Style Foundations、Accessibility、Writing Tone、Rules 等，没有 YAML front matter。它也可以生成 SKILL.md。Google 的 DESIGN.md 规范：令牌位于 YAML front matter 中，标准章节按规范的顺序排列。
如何读取网站在你的浏览器内，读取你标签页中页面上最多 280 个可见元素的计算样式，不发出网络请求。我们的服务器在浏览器中打开网址，并分析渲染后的页面。Pro 还会抽样网站的关键页面。
可读取的页面你标签页中打开的页面，包括你已登录的页面。仅限公开页面。暂不支持需要登录的页面、localhost 上的页面或私有网络中的页面。
结果保存在哪里显示在弹出窗口中，你可以复制或下载。Quick install 按钮会把 SKILL.md 写入你所选项目的 Claude Code、Codex 或 Cursor 技能文件夹。保存在你账户的“我的提取”中，你可以在那里编辑、复制或下载。你的智能体可以通过 MCP 读取它。
价格免费。无需账户或付款。预付积分，无需订阅。积分包最低 US$5 购买 50 积分；一次 Pro 提取需要 10 积分。示例库和免费工具不收取任何费用。
智能体访问扩展程序从其弹出窗口运行。TypeUI 另有独立的 CLI 和托管 MCP 服务器，提供其精选的设计技能和 UI 提示词。一个远程 MCP 服务器，其提取工具接受任意网址，可在 Claude Code、claude.ai、ChatGPT、Codex、Cursor 和其他客户端中使用。

TypeUI 提供什么

  • 一款免费、开源（MIT）的 Chrome 扩展程序，在 Chrome Web Store 上约有 40,000 名用户，无需账户或付款。
  • 完全在你的浏览器中、针对你标签页中的页面运行，包括你已登录的页面。
  • 以 TypeUI 自己的格式生成包含字体排版、颜色、间距、圆角、阴影和动效数值的 DESIGN.md，或者一个 SKILL.md。
  • 从弹出窗口复制或下载文件，或者通过 Quick install 把 SKILL.md 安装到 Claude Code、Codex 或 Cursor 项目中。
  • 除了扩展程序，TypeUI 还提供精选的设计技能、UI 提示词、开源 CLI 和托管 MCP 服务器，另有 Pro 版本，包含增强版设计技能文件、布局 UI 提示词以及一个私人 Discord 社区。

两者的区别

TypeUI 的扩展程序汇总它在单个页面上找到的样式值，并加上来自其模板的通用指导。Design Extractor 渲染网站，挑选其中的组件，为每个组件编写配方，然后把每个配方与实时网站核对，这样你的智能体就知道哪些组件可以照原样重建，哪些被标注了，以及原因。请看示例库中的 Stripe。

更喜欢从当前标签页开始？Design Extractor 的 Chrome 扩展程序会把它提交到同样的提取流程，使用同一个账户和同一份积分。你的智能体也可以通过 MCP 服务器发起提取并读取结果。在示例库中查看更多完成的文件。

如何从 TypeUI 切换

  1. 在 Design Extractor 首页粘贴网站网址，或在 Chrome 扩展程序中点击 Extract this page，然后运行一次 Pro 提取。
  2. 把结果以 DESIGN.md 为名保存在仓库根目录，替换旧文件。你在 AGENTS.md 或 CLAUDE.md 中的指引依然有效。
  3. 如果你用过 Quick install，请删除 TypeUI 写入的 design-system 技能文件夹，并保留你的 DESIGN.md 指引。
  4. 如果想让你的智能体自己运行提取，请连接 MCP 服务器。

结论

如果你需要一份遵循 Google 规范的 DESIGN.md，为从页面中挑选的每个组件提供配方，每个配方都与实时网站核对或标注原因，并保存到你的账户中，请选择 Design Extractor。它可以访问地区受限的网站。你的智能体可以通过 MCP 运行它。如表格所示，TypeUI 的扩展程序是免费的，并且可以读取你已登录的页面。

其他对比

  • getdesign.md vs Design Extractor

    一个精选的现成 DESIGN.md 文件合集，对比可从任意网址生成、符合规范且组件配方经实时网站核对的 DESIGN.md。

  • designmd.me vs Design Extractor

    两款从网址生成 DESIGN.md 的工具，从规范符合度、组件配方、与实时网站的核对以及价格几方面进行对比。

  • Refero Styles vs Design Extractor

    一个大型免费网站风格库，对比可从任意网址生成、符合规范且组件配方经实时网站核对的 DESIGN.md。

查看全部对比

常见问题

TypeUI vs Design Extractor：常见问题

关于 TypeUI 和 Design Extractor 的简短解答，核实于 2026-10-20。

免费。在 2026-10-20，该扩展程序免费，并以 MIT 许可证开源，无需账户或付款。Design Extractor 不免费：提取会消耗预付积分，积分包最低 US$5 购买 50 积分，一次 Pro 提取需要 10 积分。示例库和免费工具不收取任何费用。

不遵循。该文件遵循开源的 TypeUI DESIGN.md 格式，包含 Mission、Brand、Style Foundations 和 Rules 等章节，且版本 0.4.0 不生成 YAML front matter，因此它不遵循 Google 的 DESIGN.md 规范。Design Extractor 遵循 Google 的规范，免费的 DESIGN.md 校验器可以按规范检查任何文件。

一份遵循 Google 规范的 DESIGN.md，令牌位于 front matter 中，从页面中挑选的每个组件（比如页头、页脚、按钮、输入框和卡片）都以精炼 HTML 和 CSS 配方的形式提供。每个配方都会通过结构匹配和像素对比与实时网站进行核对，未通过的配方会标注原因。

能。它在你的浏览器内读取你标签页中的页面，因此适用于你已登录的页面。Design Extractor 只读取公开页面：暂不支持需要登录的页面、localhost 上的页面或私有网络中的页面。

Design Extractor 可以从其他国家运行提取。当提取因此失败后，结果页会提供国家选择器，优先列出可以加载该页面的国家，并通过那里的浏览器运行同样的提取。从其他国家提取的费用为 Pro 价格加 6 积分附加费（共 16 积分）。如果提取失败，我们会退还你的积分。

可以。两者生成的 DESIGN.md 都放在你的仓库中，所以你的智能体设置保持不变。通过 Design Extractor（在网站上或用它的 Chrome 扩展程序）提取这个网站，然后替换文件。如果你用过 Quick install，请删除 TypeUI 写入的 design-system 技能文件夹，并保留你的 DESIGN.md 指引。

为你需要的网站获取 DESIGN.md

粘贴任意公开网址。Pro 会抽样网站的关键页面，返回一份符合规范的 DESIGN.md，其中的组件配方都经过与实时网站的核对。

提取网站浏览示例库