How do I copy a website design?

Paste the URL into CopyDesign.ai. Our 6-pass pipeline renders the page in headless Chromium, reads every computed style, fingerprints the tech stack, and produces a 6,000-word engineering spec. Paste that spec into Claude Code, Cursor, Codex, Gemini, or v0 and the AI rebuilds the design in your own stack.

Is it legal to copy a website design?

CopyDesign.ai produces a structural specification — colors, spacing, typography scale, layout grid, animation timings, tech stack. It is not a verbatim copy of code, copy, imagery, logos, or trademarks. You are responsible for replacing proprietary brand assets and copy before shipping. Taking structural inspiration is standard practice; shipping a pixel-identical knockoff with someone else's logo is not.

Can I copy a website design without coding?

You still need an AI code tool — Claude Code, Cursor, Codex, Gemini, v0, Bolt, or Lovable — to ship the result. CopyDesign.ai is the prompt layer: it generates the structured spec those tools need to reproduce a design faithfully on the first try.

Does it work on apps behind login walls?

No. CopyDesign.ai fetches and screenshots the public-facing URL. For authenticated pages, upload screenshots via Image or Mobile mode instead.

Can it handle CSS-in-JS sites like Linear or Stripe?

Yes. We read computed styles injected after hydration, not source JS. Stripe and Linear produce some of our highest-fidelity clones.

How long does a typical clone take?

Most URL clones complete in 20-45 seconds. Image mode runs in 10-20 seconds. Video mode can take 60-90 seconds.

What AI tools does the output work with?

The generated prompt is plain text, optimised for Claude Code, Claude Design, Codex, Gemini, Cursor, Windsurf, Replit, v0, Bolt, Lovable, and ChatGPT.

How is CopyDesign.ai different from v0, Bolt, or Lovable?

v0, Bolt, and Lovable are hosted builders — you work inside their editor and the output is locked to their runtime. CopyDesign.ai is a prompt layer: you get a plain-text 6,000-word engineering spec that works in any AI code tool, forever, with no vendor lock.

Is the output copyright-safe?

The output is a structural specification — design tokens, layout, animation timings, tech stack — not a verbatim copy. You are responsible for replacing proprietary copy, imagery, brand assets, and trademarks before shipping.

What exactly is in the 6,000-word spec?

Tech stack detection, design tokens (colors, typography, spacing), component library fingerprint, full layout grid with breakpoints, animation timing functions and triggers, interaction specs (hover, scroll, focus states), responsive behavior per section, and a step-by-step build order.

Do you store the cloned sites or the specs?

We cache URL specs for 7 days so re-runs return instantly. Uploaded screenshots and videos are discarded after analysis. You can delete your clone history at any time from the dashboard.

How long does it take to copy a website design?

Most URL clones complete in 20–45 seconds. Image and mobile-screenshot mode finishes in 10–20 seconds because there is no fetch step. Video mode takes 60–90 seconds depending on file size. The 6-pass pipeline runs in parallel, so even complex JS-heavy pages rarely exceed 90 seconds.

How much does it cost to copy a website design?

Your first clone is free, no card required. After that, a single spec costs $1.99 (one-shot, no subscription). Monthly plans start at $9.99 for 12 clones, $19.99 for 30 clones, and $49 for the Scale tier with higher limits. All plans produce the same 6,000-word plain-text output.

Can I copy a website design and customize it for my brand?

Yes — that is the intended use. The spec documents design tokens, layout grid, typography, and animation timings as editable values, not locked assets. Swap the color palette, replace the logo, rewrite the copy, and the underlying structure is yours. CopyDesign.ai is a starting point, not a final deliverable.

How do I copy a website's CSS and design tokens?

CopyDesign.ai reads computed styles directly from the live DOM after the page has fully rendered. Every hex color, CSS custom property, font metric, spacing value, border-radius, and shadow definition is extracted and written into the spec as named design tokens. You get the exact values — not eyeballed approximations.

Can I copy a mobile app or mobile-responsive design?

Yes, in two ways. For mobile-responsive websites, the 6-pass pipeline captures every breakpoint, column collapse, and font-size step. For native iOS and Android apps, use Mobile App mode — upload up to 10 screenshots and receive a full spec with React Native and SwiftUI component guidance.

Does it copy animations, hover states, and scroll interactions?

Yes. The second visual pass is dedicated to motion: easing functions, durations, delays, scroll-triggered IntersectionObserver thresholds, and hover transitions are all captured and written as Motion/GSAP-compatible specs. This is one of the main advantages over pasting a screenshot into an LLM, which drops all interaction data.

What's the difference between copying a design and taking inspiration from it?

CopyDesign.ai produces a structural specification — spacing, typography scale, color tokens, layout grid, animation timings — not a verbatim copy of code, copy, logos, or brand assets. Taking structural inspiration is standard industry practice. You are responsible for replacing proprietary brand elements before shipping. The spec gives you the engineering blueprint; the creative application is yours.

Can I copy websites built with Webflow, Framer, or Squarespace?

Yes. The 6-pass pipeline reads computed styles from the live DOM regardless of the builder used. Webflow, Framer, Squarespace, Wix, and WordPress sites all render to standard HTML and CSS in the browser — that is what we extract. The spec will note the detected platform so your AI can target an appropriate stack.

Will Google penalize my site for copying another design?

Google penalizes duplicate content — identical text and media — not similar visual layouts. Design patterns (grid systems, card layouts, color palettes) are not copyrightable in most jurisdictions. Build on the structural blueprint, write original copy, and use your own imagery and brand assets. That produces a unique page Google can index and rank on its own merits.

How is CopyDesign.ai different from Locofy, Anima, or Builder.io?

Locofy, Anima, and Builder.io convert existing Figma designs into code — you need the source design file. CopyDesign.ai works from a live URL, screenshot, or video with no design file required. The output is a plain-text engineering spec you paste into any AI code tool you already use, rather than generated code locked to a proprietary runtime.

Can I copy a SaaS landing page for my own product?

Yes — SaaS landing pages are among the most common use cases. Paste the URL of any landing page you admire, get a 6,000-word spec covering its layout, typography, component structure, and animations, then drop it into Claude Code, Cursor, or v0 to build your own version with your branding and messaging.

Does it work on single-page apps built with React, Vue, or Svelte?

Yes. Headless Chromium fully evaluates JavaScript before extraction begins, so client-rendered SPAs — whether built with React, Vue, Svelte, or Angular — are processed the same way as server-rendered pages. The stack fingerprint step will detect the framework and include it in the spec so your AI targets the right primitives.

Can I copy a website's design for client work?

Yes. There is no restriction on using specs for client projects. Many agencies and freelancers use CopyDesign.ai to rapidly prototype designs inspired by reference sites, then customise them for each client. The plain-text spec can be shared directly with clients or dropped into whichever AI code tool the project uses.

How accurate is the copied design — is it really pixel-perfect?

We aim for 90% fidelity on the first AI prompt, not guaranteed pixel-perfection. Design tokens, layout grid, typography, and animations are extracted from computed values and are highly accurate. Complex WebGL scenes, proprietary SVG illustrations, and custom shader effects are approximated with described placeholders. Budget one or two rounds of AI refinement to close the remaining gap.

Do I need a Figma file to use CopyDesign.ai?

No Figma file required. CopyDesign.ai works from three input types: a public URL (most common), an uploaded screenshot or set of screenshots, or an uploaded screen-recording video. The 6-pass extraction pipeline reads the live or uploaded source directly — no design tool, no API key, no plugin to install.

Một bản đặc tả. Mọi công cụ mã AI. Không bị khóa.

Sao chép mọi thiết kế trang web thành bản đặc tả xây dựng bằng AI.

Paste a URL and we copy any website design into a bản đặc tả kỹ thuật 6.000 từ. Drop it into Claude Code, Codex, Cursor, or Gemini and get hoàn thành 90% ngay từ lần nhắc đầu tiên.

TailwindMotionshadcn/uiThree.jsGSAPWebGLReactNext.js

URL trang web

Bất kỳ trang web đang hoạt động nào — chúng tôi sẽ thêm https:// nếu thiếu. Nhấn Enter để tạo.

Tài khoản miễn phí — bao gồm 1 bản đặc tả, không yêu cầu thẻ, một tài khoản mỗi người.

Thử một ví dụ:

Cuộn

Hoạt động với mọi công cụ mã AI bạn đang sử dụng.

Claude Code

Claude Design

Codex

Gemini

Cursor

Windsurf

Replit

ChatGPT

Bolt

Copilot

Lovable

Claude Code

Claude Design

Codex

Gemini

Cursor

Windsurf

Replit

ChatGPT

Bolt

Copilot

Lovable

Sắp ra mắt công khai

Tại sao ảnh chụp màn hình thất bại

Ảnh chụp màn hình chỉ cung cấp cho AI của bạn một tệp jpeg và một lời cầu nguyện. Nó sẽ ảo giác về phông chữ, tự tạo khoảng cách và chọn sai thư viện thành phần. Chúng tôi cung cấp dữ liệu thực tế.

Cách tiếp cận bằng ảnh chụp màn hìnhscreenshot.png → llm → guesswork

Bị khóa, bay mù

Bolt, Lovable, v0 giữ bạn trong trình chỉnh sửa của họ và ảo giác mọi thứ mà ảnh chụp màn hình không thể hiển thị. Bạn mất ba giờ để sửa những gì một bản đặc tả tốt có thể ngăn chặn.

Hoạt ảnh biến mất. Ảnh chụp màn hình là một khung hình tĩnh.
Phông chữ bị đoán. Thường là system-ui.
Màu sắc ước chừng. Lệch HSL, sai độ mờ.
Bố cục đáp ứng bị tự tạo. Thường sai.
Thư viện thành phần: tùy theo LLM cảm thấy thích.
Ngăn xếp công nghệ không xác định. Đầu ra là các div không kiểu dáng.
Hiệu ứng cuộn, trạng thái di chuột, tương tác: bị bỏ qua.
Lời nhắc mơ hồ, mã đầu ra mơ hồ.

CopyDesign.aiurl → spec → any AI tool

Di động. Chính xác. Của bạn.

Markdown thuần túy. Dán nó vào bất kỳ công cụ AI nào bạn đang sử dụng. Chúng tôi thu thập trang trực tiếp, phân tích DOM, hiển thị trạng thái cuộn, trích xuất biểu đồ CSS và tạo ra một bản đặc tả với đủ tín hiệu để AI của bạn không phải đoán.

Đường cong cubic-bezier, thời lượng, độ trễ — tất cả đều được ánh xạ.
Chính xác họ phông chữ, độ đậm, kích thước, chiều cao dòng.
Màu sắc chính xác theo hex, điểm dừng gradient, biến CSS.
Mọi breakpoint, thu gọn cột, bước phông chữ.
Fingerprints shadcn / Radix / MUI / Tailwind.
Detects Next.js, Astro, Vite, Motion, GSAP.
Các trình kích hoạt cuộn và trạng thái di chuột được ghi lại.
Bản đặc tả hơn 6.000 từ mà AI của bạn thực sự có thể tuân theo.

AI của bạn chỉ tốt bằng ngữ cảnh bạn cung cấp cho nó. Hãy cung cấp cho nó một bản đặc tả, không phải một ảnh chụp màn hình.

Quy trình của chúng tôi

Không cần đào sâu DevTools. Không cần chọn màu. Không cần ghi nhật ký giá trị padding vào console. Chúng tôi chạy trang web qua sáu lượt trích xuất và trao cho bạn nguồn dữ liệu đáng tin cậy trong vòng chưa đầy 45 giây.

THU NẠP

Lấy trang trực tiếp

Headless Chromium hiển thị trang thực — JS được đánh giá, phông chữ web được tải, trạng thái cuộn được ghi lại, các cuộc gọi mạng được ghi nhật ký. Không có ảnh chụp màn hình cũ, không đoán từ mã nguồn.

TRÍCH XUẤT

Trích xuất sự thật DOM

Chúng tôi đọc CSS đã tính toán trên mọi phần tử — màu hex chính xác, họ phông chữ, chiều cao dòng, padding, border-radius, shadow. Cộng với nội dung thô để AI tái tạo văn bản thay vì ảo giác.

XEM

Phân tích hình ảnh hai lượt

Một mô hình thị giác tiên tiến đọc ảnh chụp màn hình. Lượt một ánh xạ bố cục, hệ thống phân cấp và cấu trúc thành phần. Lượt hai nắm bắt các hoạt ảnh, trạng thái di chuột và chuyển động kích hoạt bằng cuộn.

XÁC ĐỊNH

Nhận diện ngăn xếp công nghệ

Chúng tôi phát hiện Next.js, Astro, Vite, Tailwind, shadcn/ui, Radix, Framer Motion, GSAP — từ các mẫu DOM và biến toàn cục thời gian chạy. Đầu ra nhắm mục tiêu cùng ngăn xếp để AI của bạn xây dựng mã có hình dạng tự nhiên.

SOẠN THẢO

Tổng hợp bản đặc tả

Kết quả DOM + kết quả hình ảnh + nhận diện ngăn xếp công nghệ hợp nhất thành một bản tóm tắt kỹ thuật có cấu trúc dài 6.000 từ — các token thiết kế, lưới bố cục, thời gian hoạt ảnh, breakpoint đáp ứng, thứ tự xây dựng.

GIAO HÀNG

Dán vào bất kỳ công cụ AI nào

Văn bản thuần túy đầu ra — hoạt động trong Claude Code, Cursor, Codex, Windsurf, v0, Bolt, Lovable, ChatGPT. Không bị khóa nhà cung cấp. Bạn sở hữu bản đặc tả vĩnh viễn, ngay cả khi bạn hủy.

Những gì bạn nhận được

Mỗi lần chạy tạo ra một bản thiết kế có cấu trúc dài hơn 6.000 từ. Dán nó vào Claude Code, Cursor hoặc Codex và nhận được một triển khai hoạt động — không phải một ước tính ảo giác.

clone-prompt.md

6,247 words

# 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

Sao chép. Dán vào công cụ AI của bạn. Triển khai.

Ngăn xếp công nghệ

Được phát hiện từ tiêu đề, chữ ký script và các mẫu DOM. Next.js / Astro / Vite / Remix — với các phiên bản khi được hiển thị.

Token thiết kế

Giá trị hex, thuộc tính tùy chỉnh CSS, tỷ lệ khoảng cách, thông số phông chữ, border-radius, định nghĩa đổ bóng — mọi biến quan trọng.

Hành vi

Đường cong easing, trình kích hoạt cuộn, chuyển đổi di chuột, chuyển đổi breakpoint. 40% thiết kế mà ảnh chụp màn hình không thể nắm bắt.

Những gì chúng tôi trích xuất

Tín hiệu phân biệt một bản dựng hoàn chỉnh với một bản sao thô — đường cong easing, token đã tính toán, thư viện thành phần thực tế. Chúng tôi lấy nó từ trang trực tiếp, không phải từ một hình ảnh.

Trích xuất bố cục & khoảng cách

Đọc các mô hình hộp đã tính toán, định nghĩa lưới, giá trị khoảng cách, padding và hệ thống phân cấp hình ảnh từ DOM trực tiếp — không phải đoán từ ảnh chụp màn hình.

Màu sắc & Kiểu chữ chính xác

Trích xuất giá trị hex, điểm dừng gradient, thuộc tính tùy chỉnh CSS, họ phông chữ, độ đậm, kích thước và chiều cao dòng đã tính toán trực tiếp từ cây hiển thị.

Phát hiện thư viện thành phần

Nhận diện shadcn/ui, Radix, MUI, Headless UI và các mẫu Tailwind — để bản đặc tả cho AI của bạn biết nên sử dụng các nguyên mẫu nào.

Đường cong & Trình kích hoạt hoạt ảnh

Ghi lại các hàm easing, thời lượng, hiệu ứng liên kết cuộn và chuyển đổi di chuột — sau đó viết chúng thành các đặc tả Motion/GSAP mà AI của bạn có thể triển khai.

Nhận diện ngăn xếp công nghệ đầy đủ

Phát hiện Next.js, Vite, Astro, Remix, script phân tích, chữ ký CDN và tích hợp bên thứ ba. Các phiên bản chính xác khi tiêu đề hiển thị chúng.

Bản đồ Breakpoint đáp ứng

Ghi lại mọi breakpoint, chuyển đổi flex/grid, thu gọn cột và bước kích thước phông chữ — để bố cục di động không phải là một suy nghĩ sau trong bản đặc tả.

Sử dụng có trách nhiệm

Nguồn cảm hứng, không phải vi phạm.

CopyDesign.ai là một công cụ nghiên cứu và tạo mẫu. Sử dụng nó để hiểu các mẫu thiết kế, trích xuất các thành phần riêng lẻ và tăng tốc công việc gốc của riêng bạn. Chúng tôi không hỗ trợ sử dụng độc hại — không mạo danh thương hiệu, không trang lừa đảo, không vi phạm nhãn hiệu hoặc bản quyền. Thay đổi logo, tên, nội dung. Biến nó thành của bạn.

Tại sao chọn CopyDesign.ai

Chúng tôi viết bản đặc tả. AI của bạn thực hiện việc xây dựng.

Đầu ra markdown thuần túy. Hoạt động với Bolt, Lovable, v0, Cursor, Claude Code, Codex — tùy bạn chọn.

Không bị khóa công cụ. Mãi mãi.

Bản đặc tả là văn bản thuần túy. Dán nó vào Claude Code hôm nay, Codex ngày mai, Gemini tuần tới.

$1.99. Một bản đặc tả. Không yêu cầu đăng ký.

Hãy thử trước khi cam kết. Mua một lần, có kết quả ngay lập tức.

Hoàn thành 90% ngay từ lần nhắc đầu tiên. Thật lòng.

Chúng tôi không hứa hoàn hảo từng pixel. Chúng tôi hứa đủ tín hiệu để AI của bạn không phải đoán.

6.000 từ tín hiệu có cấu trúc, không phải mô tả mơ hồ.

Ngăn xếp công nghệ, token thiết kế, đặc tả hoạt ảnh, logic đáp ứng — tất cả trong một lần dán.

URL là lời nhắc. Ngừng chụp ảnh màn hình.

Cung cấp cho AI của bạn dữ liệu nó cần thay vì một hình ảnh nó phải diễn giải.

Nghiên cứu nghề. Xây dựng thứ gì đó độc đáo.

Nguồn cảm hứng, không phải vi phạm. Chúng tôi trích xuất các mẫu — bạn mang đến ý tưởng.

Giá cả

Thử một lần miễn phí, không cần thẻ. Nâng cấp khi đầu ra tự nói lên tất cả — không dùng thử, không hoàn tiền.

Miễn phí

$0/tháng

1 bản sao · vĩnh viễn

Khởi đầu

$9.99/tháng

12 bản sao / tháng

Chuyên nghiệp

$19.99/tháng

30 bản sao / tháng

Hoặc mua một bản đặc tả duy nhất với giá $1.99 — không đăng ký, không gia hạn.

Xem bảng giá đầy đủ

Câu hỏi thường gặp

Các câu hỏi, đã được trả lời.

Câu trả lời thẳng thắn về những gì CopyDesign.ai làm và không làm.

Nó có hoạt động trên các ứng dụng yêu cầu đăng nhập không?

Không. Chúng tôi chỉ lấy và chụp ảnh màn hình URL công khai. Các bảng điều khiển, trang quản trị và luồng xác thực nằm ngoài tầm với. Đối với những trường hợp đó, hãy chuyển sang chế độ Hình ảnh hoặc Di động — tự chụp ảnh màn hình và tải lên.

Nó có thể xử lý các trang web CSS-in-JS như Linear hay Stripe không?

Có. Chúng tôi đọc các kiểu đã tính toán sau khi trang hiển thị, không phải JS nguồn. Stripe và Linear là hai trong số các đầu ra có độ trung thực cao nhất của chúng tôi — CSS-in-JS không phải là vấn đề.

Còn các trang web nặng WebGL hoặc canvas thì sao?

Một phần. Bố cục tĩnh, kiểu chữ và giao diện người dùng được trích xuất sạch sẽ. Các shader WebGL và cảnh Three.js được ước tính — chúng tôi mô tả hiệu ứng và cung cấp một triển khai giữ chỗ. Việc sao chép shader hoàn chỉnh không nằm trong lộ trình phát triển.

URL của tôi có được lưu trữ ở đâu không?

URL của bạn được lưu trữ trong lịch sử bản sao của bạn, hiển thị trong bảng điều khiển của bạn. Chúng tôi không bán hoặc chia sẻ nó. Ảnh chụp màn hình được chụp trong quá trình phân tích sẽ bị loại bỏ sau khi bản đặc tả được tạo. Xem chính sách quyền riêng tư để biết chi tiết đầy đủ.

Thế nào là một 'bản sao' — chạy lại có tốn thêm phí không?

Mỗi lần nhấp 'Tạo' tốn một tín dụng, bao gồm cả việc chạy lại cùng một URL. Kết quả không được lưu vào bộ nhớ cache giữa các phiên, vì vậy một lần chạy lại sẽ tạo ra một bản đặc tả mới và tốn một tín dụng.

Một bản sao thông thường mất bao lâu?

Chế độ URL: 20–45 giây. Chế độ hình ảnh và ảnh chụp màn hình di động: 10–20 giây (không có bước lấy dữ liệu). Chế độ video: 60–90 giây tùy thuộc vào kích thước tệp. Các trang nặng JS mất nhiều thời gian hơn vì chúng tôi đợi hiển thị hoàn chỉnh.

Tôi có thể sao chép ứng dụng di động từ ảnh chụp màn hình không?

Có — đó là chế độ Ứng dụng di động. Tải lên tối đa 10 ảnh chụp màn hình từ bất kỳ ứng dụng iOS hoặc Android nào và nhận được một bản đặc tả đầy đủ với hướng dẫn thành phần React Native và SwiftUI. Nhiều màn hình hơn có nghĩa là đầu ra hoàn chỉnh hơn.

Đầu ra hoạt động với những công cụ AI nào?

Bản đặc tả là văn bản thuần túy. Dán nó vào Claude Code, Codex, Gemini, Cursor, Windsurf, Replit, v0, Bolt hoặc ChatGPT. Nó được định dạng cho Next.js + Tailwind theo mặc định nhưng đủ dễ đọc để thích ứng với bất kỳ ngăn xếp công nghệ nào.

Hãy cung cấp cho AI của bạn một bản đặc tả.
Không phải một ảnh chụp màn hình để nheo mắt nhìn.

Một URL. Dưới 45 giây. Một bản đặc tả 6.000 từ mà AI của bạn thực sự có thể xây dựng từ đó. Bản đầu tiên miễn phí — không cần thẻ, không danh sách chờ.

Xem bảng giá

Không cần thẻ · Hủy bất cứ lúc nào · Đầu ra trong vòng dưới 45 giây