Refero Styles vs Design Extractor

Design Extractor 可以根据你提供的任意公开网址构建 DESIGN.md。文件遵循 Google 的 DESIGN.md 规范，并把从页面中挑选的每个组件以 HTML 和 CSS 配方的形式交付，供你的编程智能体重建。每个配方都会与实时网站进行核对，或标注原因。它也支持只响应特定国家访问者的网站。

Refero Styles 是一个大型免费网站风格库，每种风格都以多种格式提供颜色、字体排版、间距和组件。刚接触这个格式？请阅读什么是 DESIGN.md。

核实于 ，依据styles.refero.design、其中一个风格页面和其风格站点地图。服务内容和价格可能会变化，做决定前请查看对方网站。

为什么选择 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 积分）。如果提取失败，我们会退还你的积分。

并排对比

Refero StylesDesign Extractor
规范符合度不提供遵循 Google 的 DESIGN.md 规范：front matter 只使用规范的属性，没有自定义的顶层键；标准章节按规范的顺序排列；组件条目仅限规范规定的八个属性，并使用字面值。
组件配方每个组件都以文字描述，包括其角色和尺寸数据，不含 HTML。从页面中挑选的每个组件，比如页头、页脚、按钮、输入框和卡片，都以配方的形式交付：Components 章节中的精炼 HTML 和 CSS，供你的编程智能体重建。
与实时网站核对不提供是。每个配方都会被单独渲染并与实时网站核对：对其各部分做结构匹配，并做像素对比。未通过的组件会标注原因，绝不会作为已验证的组件交付。
地区受限的网站不提供是。当网站屏蔽某些国家的访问者时，失败的提取会提供国家选择器，优先列出可以加载该页面的国家，并通过那里的浏览器运行同样的提取。从其他国家提取的费用为 Pro 价格加 6 积分附加费（共 16 积分）。
是什么一个免费的网站风格库，处于 beta 阶段，来自 refero.design 上的 UI 参考产品 Refero。一个生成器：你给它一个公开网址，它返回该网站的 DESIGN.md。
按需支持任意网站不提供是。粘贴任意公开网址，提取立即开始。
覆盖范围其风格站点地图中列出的 1,342 个风格页面。任意公开网站，外加一个预提取品牌的示例库。
每种风格的格式DESIGN.md（精简版和扩展版）、Tailwind v4、CSS 变量和设计令牌。一份 DESIGN.md，令牌位于 front matter 中，组件配方以 HTML 和 CSS 编写。
价格可免费浏览和复制。预付积分，无需订阅。积分包最低 US$5 购买 50 积分；一次 Pro 提取需要 10 积分。
时效性快照。Apple 风格提取于 2026-09-20。在你运行的那一刻根据实时网站生成。
智能体访问每个风格页面都链接到 Refero 的 MCP，适用于 Claude、ChatGPT、Cursor、Codex 等。一个远程 MCP 服务器，其提取工具接受任意网址，可在 Claude Code、claude.ai、ChatGPT、Codex、Cursor 和其他客户端中使用。
浏览器扩展程序不提供一款可以提取当前标签页的 Chrome 扩展程序。

Refero Styles 提供什么

  • 一个免费的网站风格库，可按风格氛围浏览，比如深色模式 SaaS 或编辑风格布局。
  • 每种风格提供多种格式：DESIGN.md（精简版和扩展版）、Tailwind v4、CSS 变量和设计令牌。
  • 链接到 Refero 的 MCP，适用于 Claude、ChatGPT、Cursor、Codex 等。

风格库 vs 按需支持任意网址

风格库只覆盖已经有人添加进去的网站。Design Extractor 读取你指定的实时网站，因此可以覆盖你自己的产品、客户、竞争对手或小众品牌，并呈现它们今天的样子。

在首页粘贴网址，或者让你的智能体通过 MCP 服务器来做。在示例库中查看完成的文件，包括它们的配方和核对结果。

如何从 Refero Styles 切换

  1. 在 Design Extractor 首页粘贴网站网址，运行一次 Pro 提取。
  2. 把结果以 DESIGN.md 为名保存在仓库根目录，并保留 AGENTS.md 或 CLAUDE.md 中的指引。手动编辑后，可以用免费的 DESIGN.md 校验器检查。
  3. 或者让你的智能体来做：连接 MCP 服务器，让它提取这个网站。

结论

如果你需要为任意公开网站（而不只是风格库中的网站）生成 DESIGN.md，并且组件配方经过与实时网站的核对，请选择 Design Extractor。它按网站现在的样子读取网站，遵循 Google 的规范，为从页面中挑选的每个组件提供配方，未通过时会标注原因。它可以访问地区受限的网站。你的智能体可以通过 MCP 运行它。

其他对比

  • getdesign.md vs Design Extractor

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

  • designmd.me vs Design Extractor

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

  • TypeUI vs Design Extractor

    TypeUI 的免费 Chrome 扩展程序会根据标签页中的样式填充它自己的模板，对比符合规范、组件配方经实时网站核对的 DESIGN.md。

查看全部对比

常见问题

Refero Styles vs Design Extractor：常见问题

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

免费。2026-10-20 当天，在 styles.refero.design 上浏览和复制风格是免费的。它的页面链接到 refero.design 上 Refero 的 MCP。

不能。Refero Styles 没有提交自己网址的方式：你只能从它的风格库中挑选。Design Extractor 在你运行时即可从任意公开网址生成 DESIGN.md。

不能。Design Extractor 只生成一个文件：一份遵循 Google 规范的 DESIGN.md，令牌位于 front matter 中，从页面中挑选的每个组件都以精炼 HTML 和 CSS 配方的形式提供。你的编程智能体读取它，然后编写你的项目所用的样式。

每个组件配方都会被单独渲染并与实时网站比较：将其各部分与页面上测得的数据做结构匹配，并与真实元素的最新截图做像素对比。未通过的配方会标注原因，绝不会作为已验证的配方交付。

2026-10-20 当天，其风格站点地图列出了 1,342 个风格页面。

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

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

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

提取网站浏览示例库