复制任何网站设计 为AI生成构建规范。
Paste a URL and we copy any website design into a 6,000字工程规范. Drop it into Claude Code, Codex, Cursor, or Gemini and get 首次提示即可完成90%.
任何在线网站 — 如果缺少 https://，我们将自动添加。按 Enter 键生成。
免费账户 — 包含 1 份规格，无需银行卡，每人限一个账户。
试用示例：
兼容您已使用的所有AI代码工具。
即将公开发布
截图只会给你的AI一张JPEG图片和一份祈祷。它会凭空猜测字体，随意发明间距，并选择错误的组件库。我们提供的是实际数据。
锁定工具，盲目开发
Bolt、Lovable、v0 将你困在它们的编辑器中，并凭空猜测截图无法显示的一切。你将花费三小时修复一份好的规范本可以避免的问题。
- 动画丢失。截图只是一个静止帧。
- 字体猜测。通常默认为 system-ui。
- 颜色凭眼判断。HSL偏差，透明度错误。
- 响应式布局凭空创造。通常不正确。
- 组件库：LLM随意选择。
- 技术栈未知。输出是未样式化的 div。
- 滚动效果、悬停状态、交互：全部丢失。
- 模糊的提示输入，模糊的代码输出。
便携。精准。专属。
纯Markdown格式。将其粘贴到您已付费使用的任何AI工具中。我们抓取实时页面，解析DOM，渲染滚动状态，提取CSS图谱，并生成一份具有足够信号的规范，让您的AI无需猜测。
- cubic-bezier 曲线、持续时间、延迟——全部映射。
- 精确的字体家族、字重、大小、行高。
- 精确到十六进制的颜色、渐变停止点、CSS变量。
- 每个断点、列折叠、字体步长。
- 识别 shadcn / Radix / MUI / Tailwind。
- 检测 Next.js、Astro、Vite、Motion、GSAP。
- 滚动触发器和悬停状态均有文档记录。
- 6,000多字的规范，您的AI可以真正遵循。
您的AI能力取决于您提供给它的上下文。给它一份规范，而不是一张截图。
无需深入DevTools。无需手动取色。无需控制台记录填充值。我们对网站进行六次提取处理，并在45秒内为您提供真实数据源。
获取实时网站
无头 Chromium 渲染真实页面——JS已评估，网络字体已加载，滚动状态已捕获，网络请求已记录。没有过时的截图，没有源代码视图猜测。
提取DOM真实数据
我们读取每个元素的计算CSS——精确的十六进制颜色、字体家族、行高、内边距、边框半径、阴影。以及原始文本，以便AI复制文本而不是凭空猜测。
两遍视觉分析
前沿视觉模型读取截图。第一遍映射布局、层级和组件结构。第二遍捕捉动画、悬停状态和滚动触发的运动。
识别技术栈
我们通过DOM模式和运行时全局变量检测 Next.js、Astro、Vite、Tailwind、shadcn/ui、Radix、Framer Motion、GSAP。输出目标是相同的技术栈，因此您的AI可以构建原生形态的代码。
合成规范
DOM发现 + 视觉发现 + 技术栈识别合并成一份结构化的6,000字工程简报——设计令牌、布局网格、动画时间、响应式断点、构建顺序。
粘贴到任何AI工具
纯文本输出——适用于 Claude Code、Cursor、Codex、Windsurf、v0、Bolt、Lovable、ChatGPT。无厂商锁定。即使您取消订阅，您也永远拥有该规范。
每次运行都会生成一份结构化的6,000多字蓝图。将其粘贴到 Claude Code、Cursor 或 Codex 中，即可获得可用的实现——而不是凭空猜测的近似值。
# CLONE SPECIFICATION # source · linear.app ## TECH STACK DETECTED framework Next.js 14 (App Router) styling Tailwind CSS + CSS vars components Custom primitives + Radix animation Framer Motion font loader next/font · "Inter Tight" ## DESIGN TOKENS → colors --background #08090A --foreground #F7F8F8 --accent #5E6AD2 --muted #858699 --border rgba(255,255,255,0.08) ## TYPOGRAPHY font-family "Inter Tight", -apple-system scale 12 / 14 / 16 / 20 / 28 / 40 / 64 line-height 1.1 headings · 1.5 body tracking -0.022em headings ## LAYOUT ARCHITECTURE hero 12-col grid · 1200px max · centered nav sticky · backdrop-blur(24px) · 64h section 96px vertical rhythm cards 4px radius · inset 1px 0 rgba(...) ## ANIMATION SPECS hero.enter opacity 0→1, y 20→0, 600ms ease-out scroll.reveal IntersectionObserver · margin -80px hover.default scale(1.02) · 250ms cubic-bezier(.2,.8,.2,1) ## RESPONSIVE ≤ 640px single column · 16px padding ≤ 1024px 2-col grid · 24px padding ≥ 1024px 3-col grid · 48px padding ## BUILD INSTRUCTIONS Build in Next.js 14 (App Router). Use Tailwind with
技术栈
从请求头、脚本签名和DOM模式中检测。Next.js / Astro / Vite / Remix — 如果暴露，则包含版本信息。
设计令牌
十六进制值、CSS自定义属性、间距比例、字体度量、边框半径、阴影定义——所有重要变量。
行为
缓动曲线、滚动触发器、悬停过渡、断点切换。截图无法捕捉的设计中40%的部分。
将精良构建与粗糙复制区分开来的信号——缓动曲线、计算令牌、实际组件库。我们从实时页面而非图像中提取。
布局与间距提取
从实时DOM中读取计算的盒模型、网格定义、间距值、内边距和视觉层级——而非从截图猜测。
精确颜色与字体
直接从渲染树中提取十六进制值、渐变停止点、CSS自定义属性、字体家族、字重、大小和计算的行高。
组件库检测
识别 shadcn/ui、Radix、MUI、Headless UI 和 Tailwind 模式——因此规范会告诉您的AI应使用哪些基础组件。
动画曲线与触发器
捕获缓动函数、持续时间、滚动关联效果和悬停过渡——然后将其编写为您的AI可以实现的 Motion/GSAP 规范。
全栈识别
检测 Next.js、Vite、Astro、Remix、分析脚本、CDN签名和第三方集成。如果请求头暴露，则包含精确版本。
响应式断点映射
记录每个断点、flex/grid切换、列折叠和字体大小步长——因此移动布局在规范中不再是事后考虑。
灵感，而非侵权。
CopyDesign.ai 是一款学习和原型设计工具。使用它来理解设计模式，提取单个组件，并加速您自己的原创工作。 我们不支持恶意使用 — 不得冒充品牌、不得用于钓鱼页面、不得侵犯商标或版权。更换标志、名称和文案。使其成为您自己的作品。
我们编写规范。您的AI负责构建。
纯Markdown输出。兼容 Bolt、Lovable、v0、Cursor、Claude Code、Codex——由您选择。
永不锁定工具。
规范是纯文本。今天粘贴到 Claude Code，明天粘贴到 Codex，下周粘贴到 Gemini。
$1.99。一份规范。无需订阅。
承诺前先试用。一次性购买，即时输出。
首次提示即可完成90%。真实不虚。
我们不承诺像素级完美。我们承诺提供足够的信号，让您的AI无需猜测。
6,000字的结构化信号，而非模糊描述。
技术栈、设计令牌、动画规范、响应式逻辑——一键粘贴。
URL即提示。停止截图。
为您的AI提供所需数据，而不是一张需要它去解释的图片。
学习技艺。创造原创作品。
灵感，而非侵权。我们提取模式——您带来创意。
免费试用一次，无需银行卡。当输出效果不言自明时再升级——无试用期，不退款。
免费
1次克隆 · 永久
入门版
12次克隆 / 月
专业版
30次克隆 / 月
问题，已解答。
关于 CopyDesign.ai 的功能和限制的直接解答。
它能处理需要登录的应用程序吗？
它能处理像 Linear 或 Stripe 这样的 CSS-in-JS 网站吗？
WebGL 或大量使用 canvas 的网站呢？
我的URL会存储在哪里吗？
什么算作一次“克隆”——重复运行会额外收费吗？
通常一次克隆需要多长时间？
我可以从截图克隆移动应用程序吗？
输出兼容哪些AI工具？
给你的AI一份规范。
而不是一张需要它费力辨认的截图。
一个URL。45秒内。一份6,000字的规范，你的AI可以真正据此构建。首次免费——无需银行卡，无需等待。
无需银行卡 · 随时取消 · 45秒内输出