把公开网页转换成可运行的 Tailwind 代码和可复用的 DESIGN.md。

不用再让 AI 对着截图猜布局和样式。把生成结果交给 Cursor、Claude Code 或 Codex,少花时间反复调整细节。

Tailwind CSS v4 项目DESIGN.md响应式布局安全静态预览

截图只展示一个画面,真实网页包含实现细节。

AI 只能从截图猜测字体、间距和响应式布局。CloneAny 读取页面结构、CSS 和资源,再重建成可运行代码。

程序化重建

直接读取页面结构和 CSS,生成干净的 Tailwind CSS v4 项目。

完整页面资源

保留布局、变量与资源,生成安全静态预览。

响应式布局

亮暗主题

切换设备宽度或亮暗主题,两侧都会显示同一个状态。网页预览同步滚动,HTML 代码则各自滚动。

网站风格 → DESIGN.MD

按 Google 的 DESIGN.md 规范保存网站风格。

CloneAny 从页面捕获颜色、字体、间距、形状和组件。生成的文件遵循 Google Labs Code 的开放 DESIGN.md 规范,同时提供精确的样式值和 coding agent 可以理解的说明。

Atlas Dispatch 的颜色

Success#16885c
Success Dark#55c995
Action Background#f1f2f4
Action Background Dark#242831

排版

Body
Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif · 14px
Display
Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif · 19px
H2
Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif · 15px

间距

  • 4px
  • 8px
  • 12px
  • 16px

圆角

  • 8px
  • 9px
  • 10px
  • 11px
  • 12px
  • 14px

组件

  • Tab List

    padding: 4px

  • Header

    backgroundColor: rgba(255, 255, 255, 0.94)

  • Header Dark Mode

    backgroundColor: rgba(25, 28, 34, 0.94)

  • Image

    backgroundColor: rgb(251, 252, 254) · height: 230px

查看提取的网站风格

交给你常用的 coding agent

两份产物来自同一次捕获。页面结构和风格事实可以一起交给 coding agent。

Claude Code
Codex
Cursor
Kiro
Gemini CLI
GitHub Copilot
More
  1. 输入网页网址

    选择一个无需登录即可打开的公开页面。

  2. 获得代码与网站风格

    下载克隆代码,同时获得从同一页面提取的网站风格。

  3. 交给 coding agent

    让你常用的 coding agent 继续处理内容、数据和交互。

交付给 coding agentproject/

tailwind-project/

HTML、Tailwind CSS、本地资源与静态构建

DESIGN.md

页面的颜色、排版、间距与组件规则

按 DESIGN.md 保持现有风格,给首页接入真实数据并补齐交互。

克隆前常见问题

直接说明产物、限制和使用边界。

从真实网页开始,不再依赖截图。

粘贴公开网址,把可运行代码和页面的 DESIGN.md 一起交给 AI 编程工具。