getdesign.md vs Design Extractor
Design Extractor 可以根据你提供的任意公开网址构建 DESIGN.md。文件遵循 Google 的 DESIGN.md 规范,并把从页面中挑选的每个组件以 HTML 和 CSS 配方的形式交付,供你的编程智能体重建。每个配方都会与实时网站进行核对,或标注原因。它也支持只响应特定国家访问者的网站。
getdesign.md 是一个精选的知名品牌现成 DESIGN.md 文件合集。下面是两者的对比。刚接触这个格式?请阅读什么是 DESIGN.md。
核实于 ,依据getdesign.md、其申请页面、Catalog Pass 页面和awesome-design-md 仓库。服务内容和价格可能会变化,做决定前请查看对方网站。
为什么选择 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 积分)。如果提取失败,我们会退还你的积分。
并排对比
| getdesign.md | Design Extractor | |
|---|---|---|
| 规范符合度 | 采用 Google DESIGN.md 规范的结构:令牌位于 YAML front matter 中,标准章节按规范的顺序排列。 | 遵循 Google 的 DESIGN.md 规范:front matter 只使用规范的属性,没有自定义的顶层键;标准章节按规范的顺序排列;组件条目仅限规范规定的八个属性,并使用字面值。 |
| 组件配方 | 组件在 front matter 中定义为令牌,并以文字描述,不含 HTML。 | 从页面中挑选的每个组件,比如页头、页脚、按钮、输入框和卡片,都以配方的形式交付:Components 章节中的精炼 HTML 和 CSS,供你的编程智能体重建。 |
| 与实时网站核对 | 不提供 | 是。每个配方都会被单独渲染并与实时网站核对:对其各部分做结构匹配,并做像素对比。未通过的组件会标注原因,绝不会作为已验证的组件交付。 |
| 地区受限的网站 | 文件来自目录或私人申请。 | 是。当网站屏蔽某些国家的访问者时,失败的提取会提供国家选择器,优先列出可以加载该页面的国家,并通过那里的浏览器运行同样的提取。从其他国家提取的费用为 Pro 价格加 6 积分附加费(共 16 积分)。 |
| 是什么 | 一个从真实网站分析得出的精选 DESIGN.md 文件合集,由 VoltAgent 团队维护。 | 一个生成器:你给它一个公开网址,它返回该网站的 DESIGN.md。 |
| 按需支持任意网站 | 不能即时生成。免费合集之外的网站需要发送付费的私人申请,文件会发送到你的邮箱。 | 是。粘贴任意公开网址,提取立即开始。完成后,DESIGN.md 会在结果页中打开。 |
| 免费文件 | 是。一组免费文件,可以下载或用 npx getdesign@latest add stripe 安装。其中 84 个文件也在 awesome-design-md GitHub 仓库中,采用 MIT 许可证。 | 提取需要付费。我们已经提取的 DESIGN.md 示例库可以免费阅读和复制。 |
| 覆盖范围 | 一个包含 551 个网站的网站目录。免费合集之外的目录条目会显示预览并提供付费申请,而不是下载。 | 任意公开网站,外加一个小型的预提取品牌示例库。 |
| 价格 | 免费合集:免费。私人 DESIGN.md:一次性 US$39(标价 US$59)。Catalog Pass:每月 US$99,包含 45 个精选文件,每月新增 5 个或更多。 | 预付积分,无需订阅。积分包最低 US$5 购买 50 积分;一次 Pro 提取需要 10 积分。积分永不过期。 |
| 文件如何生成 | 对该网站公开可见模式的独立分析,经精选后作为获取灵感的起点。 | 在你运行时,于浏览器中根据实时网站渲染生成。Pro 会抽样网站的关键页面。 |
| 时效性 | 网站被分析时的快照。条目没有显示分析日期。 | 与你运行的那一刻同步。之后重新提取是一次新的、需付费的提取。 |
| 智能体访问 | 一个按名称安装 DESIGN.md 的 CLI。没有 MCP 服务器或 API。 | 适用于 Claude Code、Cursor、Codex、ChatGPT 和其他客户端的 MCP 服务器,以及用于当前标签页的 Chrome 扩展程序。 |
| 附加功能 | 每个文件的浅色和深色实时预览,以及入门套件(网站套件一次性 US$249,标价 US$299)。 | 免费工具:DESIGN.md 校验器、网站字体查找器和配色提取器。 |
getdesign.md 提供什么
- 一组知名品牌的免费 DESIGN.md 文件,其中大部分也以 awesome-design-md 的名称在 GitHub 上以 MIT 许可证发布。
- 在终端中用 npx getdesign 一行命令安装。
- 每个文件的浅色和深色实时预览。
- 可按申请为其他网站制作私人 DESIGN.md 文件,通过邮件交付,另有按月计费的 Catalog Pass。
- 入门套件,比如网站套件。
合集 vs 按需支持任意网址
如何从 getdesign.md 切换
- 在 Design Extractor 首页粘贴网站网址,运行一次 Pro 提取。
- 把结果以 DESIGN.md 为名保存在仓库根目录,替换旧文件,并保留 AGENTS.md 或 CLAUDE.md 中的指引。如果你手动编辑了它,可以用免费的 DESIGN.md 校验器检查。
- 或者让你的智能体来做:连接 MCP 服务器,让它提取这个网站。
结论
如果你需要按需为任意网站(而不只是目录中的网站)生成 DESIGN.md,并且组件配方经过与实时网站的核对,请选择 Design Extractor。它按你运行时网站的样子读取网站,遵循 Google 的规范,为从页面中挑选的每个组件提供配方;未通过的配方会标注原因。你的智能体可以通过 MCP 服务器自己发起提取。
其他对比
designmd.me vs Design Extractor
两款从网址生成 DESIGN.md 的工具,从规范符合度、组件配方、与实时网站的核对以及价格几方面进行对比。
Refero Styles vs Design Extractor
一个大型免费网站风格库,对比可从任意网址生成、符合规范且组件配方经实时网站核对的 DESIGN.md。
TypeUI vs Design Extractor
TypeUI 的免费 Chrome 扩展程序会根据标签页中的样式填充它自己的模板,对比符合规范、组件配方经实时网站核对的 DESIGN.md。
常见问题
getdesign.md vs Design Extractor:常见问题
关于 getdesign.md 和 Design Extractor 的简短解答,核实于 2026-10-20。
部分免费。getdesign.md 上的免费合集(其中大部分也以 awesome-design-md 的名称在 GitHub 上以 MIT 许可证发布)可以下载,或用 npx getdesign 安装。为其他网站制作私人 DESIGN.md 一次性收费 US$39,Catalog Pass 每月 US$99。价格核实于 2026-10-20。
能,但需要付费的私人申请:你提交网址,他们把文件发送到你的邮箱。在 2026-10-20,该网站没有即时的自助生成器。Design Extractor 在你运行时即可从任意公开网址生成 DESIGN.md。
是的。front matter 只使用规范的属性,没有自定义的顶层键;标准章节按规范的顺序排列;组件条目只使用规范规定的八个属性,并使用字面值。免费的 DESIGN.md 校验器可以按规范检查任何文件。
每个配方都会被单独渲染并与实时网站比较:将其各部分与页面上测得的数据做结构匹配,并与真实元素的最新截图做像素对比。未通过的配方会被重建并再次检查;仍未通过的配方会标注原因。
不免费。提取使用预付积分:积分包最低 US$5 购买 50 积分,一次 Pro 提取需要 10 积分。积分永不过期,无需订阅。浏览示例库和使用免费工具不收取任何费用。
一样。两者都给你一份 DESIGN.md,你把它放进仓库,并让你的智能体指向它。切换到 Design Extractor 不会改变你的智能体设置。