把公开网页转换成可运行的 Tailwind 代码和可复用的 DESIGN.md。
不用再让 AI 对着截图猜布局和样式。把生成结果交给 Cursor、Claude Code 或 Codex,少花时间反复调整细节。
截图只展示一个画面,真实网页包含实现细节。
AI 只能从截图猜测字体、间距和响应式布局。CloneAny 读取页面结构、CSS 和资源,再重建成可运行代码。
程序化重建
直接读取页面结构和 CSS,生成干净的 Tailwind CSS v4 项目。
完整页面资源
保留布局、变量与资源,生成安全静态预览。
响应式布局
亮暗主题
切换设备宽度或亮暗主题,两侧都会显示同一个状态。网页预览同步滚动,HTML 代码则各自滚动。
网站风格 → DESIGN.MD
按 Google 的 DESIGN.md 规范保存网站风格。
CloneAny 从页面捕获颜色、字体、间距、形状和组件。生成的文件遵循 Google Labs Code 的开放 DESIGN.md 规范,同时提供精确的样式值和 coding agent 可以理解的说明。
Atlas Dispatch 的颜色
排版
- 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。
输入网页网址
选择一个无需登录即可打开的公开页面。
获得代码与网站风格
下载克隆代码,同时获得从同一页面提取的网站风格。
交给 coding agent
让你常用的 coding agent 继续处理内容、数据和交互。
tailwind-project/
HTML、Tailwind CSS、本地资源与静态构建
DESIGN.md
页面的颜色、排版、间距与组件规则
Gallery
先看看真实的克隆结果。
打开原网页和克隆结果,直接检查 CloneAny 保留了哪些布局与视觉细节。
克隆前常见问题
直接说明产物、限制和使用边界。
从真实网页开始,不再依赖截图。
粘贴公开网址,把可运行代码和页面的 DESIGN.md 一起交给 AI 编程工具。