DESIGN.md 生成器：从网页提取设计风格

让 AI 编程工具有具体的设计参考。输入公开网页，生成描述颜色、排版、间距和布局的 DESIGN.md，同时获得对应的 Tailwind 项目和静态预览。

你想参考哪个网页？

仅支持公开页面。登录后使用任务额度生成。

查看真实生成结果了解生成流程

一个实际输出示例。页面预览与对应的 DESIGN.md 来自同一次 CloneAny 生成。

DESIGN.md 是什么？

DESIGN.md 是记录界面视觉规则的 Markdown 文件，为开发者或编程 Agent 提供标题字号、背景颜色、间距和组件外观等设计参考。

只说“让新页面和我们的网站风格一致”，仍然留下很多未说明的选择。设计指南把这些选择写具体；你仍需说明内容和功能要求，并检查最终界面。

哪些场景适合使用？

当你希望后续开发延续已有页面的视觉风格时，可以从这张页面开始。

扩展自己的产品：为新增的设置页或看板提供已有字体、间距和组件的参考。
使用 AI 编程工具：提供具体设计规则，减少逐页重复描述外观的工作。
交接已有网站：把可读的设计指南与源码放在一起，让接手的开发者能对照查看。
研究获准使用的参考：理解布局和组件模式，再为自己的内容与品牌作出设计选择。

如何从网页生成 DESIGN.md

1. 选择一个公开网页
粘贴你拥有或获准复用的公开页面 URL，选择最能体现目标风格的那一页。登录后开始生成，填写的 URL 会保留到工作区。
2. 生成设计指南
CloneAny 在浏览器中读取页面，将可观察的设计信息整理成 DESIGN.md。同一次页面捕获还会生成 Tailwind CSS v4 项目和静态预览，方便对照检查。
3. 下载并用于后续开发
打开完成的任务，查看预览和 DESIGN.md。可以下载指南用于已有项目，也可以下载开发项目，从捕获的页面继续修改。让编程工具先阅读指南，再开始修改界面。

对照页面，看看实际生成的文件

Atlas Dispatch 是 CloneAny 自有的示例看板。可以打开源页面、生成的预览和完整指南，对照文档中的设计与实际页面。下面的节选直接读取自可下载的文件。

生成的文件包含什么？

指南描述所选页面中发现的设计信息，具体内容取决于页面实际呈现的部分；单个页面无法记录只存在于其他页面的组件。

颜色：观察到的文字、背景、操作与状态颜色，以及可用的主题差异。
排版：字体家族、标题与正文字号、字重和行高。
布局与间距：页面结构、元素间距、内边距，以及观察到的响应式变化。
组件与细节：重复使用的界面模式、边框、圆角、阴影，以及观察到的状态。

DESIGN.md · 排版节选

typography:
  body:
    fontFamily: "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif"
    fontSize: "14px"
  display:
    fontFamily: "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif"
    fontSize: "19px"
  h2:
    fontFamily: "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif"
    fontSize: "15px"

阅读完整 DESIGN.md 对照源页面与生成页面

North Index 生成的刊物页面，展示与看板示例不同的网格和字体层级 — North Index · Gallery 中的刊物页面

参考页面不局限于看板

刊物、作品集与看板有不同的布局选择。这个刊物示例使用了不同的网格和字体层级；可以对照它与 Atlas Dispatch 的生成指南，看看参考内容如何随源页面变化。

查看这个示例阅读它的 DESIGN.md

如何交给编程工具使用？

将下载的文件放进项目，并明确要求工具阅读。仅有这个文件名，并不保证工具会自动加载；具体设置可参考下方各工具的操作指南。

说明要开发的页面、内容和交互。修改前保留原始指南的副本；设计发生变化后，更新工作中的指南，使其与最终界面一致，并检查桌面与手机宽度下的效果。

可以这样开始对话

修改前先阅读 DESIGN.md。根据文档中的字体、颜色、间距和组件模式新增一个设置页面。保留原始指南副本；对文档未覆盖的新设计选择作出说明，并检查桌面与手机上的效果。

生成前需要了解什么？

CloneAny 处理当前公开的 HTTP(S) 页面，不会递归复制整个网站，也不会复现其后端、私有数据或源站脚本。登录后内容和无法访问的嵌入内容不属于这份参考。

这份文件是设计参考，不保证 AI 工具能精确复现设计。将它用于更大范围的设计系统前，请检查缺失的状态和组件。使用源页面内容、字体和素材时，需要自行确认复用权限。

生成需要 CloneAny 账号和可用任务额度，当前额度可在工作区查看。开始自己的任务前，可以先查看本页公开示例及其完整 DESIGN.md。

继续你的编程工作流

从你想继续开发的页面开始

把页面的视觉规则带进下一个开发任务。在上方粘贴公开 URL，生成指南和对应项目。

生成你的 DESIGN.md

最后更新：2026年9月13日