DESIGN.md 工具对比

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

其他工具走的是不同的路线。getdesign.md 和 Refero Styles 这类合集为它们已经分析过的网站提供现成文件；designmd.me 从网址生成文件；TypeUI 的 Chrome 扩展程序根据你标签页中的样式填充它自己的模板。每篇对比都列出了我们核实的内容和核实时间。刚接触这个格式？请阅读什么是 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 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 的免费 Chrome 扩展程序会根据标签页中的样式填充它自己的模板，对比符合规范、组件配方经实时网站核对的 DESIGN.md。