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.

Tek bir spec. Her yapay zeka kod aracı. Kilitlenme yok.

Herhangi bir web sitesi tasarımını kopyalayın yapay zeka ile oluşturulabilir bir speke dönüştürün.

Paste a URL and we copy any website design into a 6.000 kelimelik mühendislik speki. Drop it into Claude Code, Codex, Cursor, or Gemini and get İlk istemde %90'ı hazır.

TailwindMotionshadcn/uiThree.jsGSAPWebGLReactNext.js

Web sitesi URL

Herhangi bir canlı site — eksikse https:// ekleriz. Oluşturmak için Enter'a basın.

Ücretsiz hesap — 1 spec dahil, kart gerekmez, kişi başı bir hesap.

Bir örnek deneyin:

Kaydır

Halihazırda kullandığınız her yapay zeka kod aracıyla çalışır.

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

Yakında herkese açık olarak yayınlanıyor

Ekran görüntüleri neden yetersiz kalır?

Bir ekran görüntüsü, yapay zekanıza bir jpeg ve bir dua verir. Yazı tipini halüsinasyon olarak görür, boşlukları uydurur ve yanlış bileşen kütüphanesini seçer. Biz ona gerçek veriyi veriyoruz.

Ekran görüntüsü yaklaşımıscreenshot.png → llm → guesswork

Kilitli, kör uçuş

Bolt, Lovable, v0 sizi kendi editörlerinde tuzağa düşürür ve ekran görüntüsünün gösteremediği her şeyi halüsinasyon olarak görür. İyi bir spec'in önleyeceği şeyi düzeltmek için üç saat harcarsınız.

Animasyonlar kaybolur. Ekran görüntüsü donmuş bir karedir.
Yazı tipleri tahmin edilir. Genellikle system-ui'ye denk gelir.
Renkler göz kararıdır. HSL kayması, yanlış opaklık.
Duyarlı düzen uydurulur. Genellikle yanlıştır.
Bileşen kütüphanesi: LLM'nin canı ne isterse.
Teknoloji yığını bilinmez. Çıktı stilize edilmemiş div'lerdir.
Kaydırma efektleri, hover durumları, etkileşimler: kaybolur.
Belirsiz istem girer, belirsiz kod çıkar.

CopyDesign.aiurl → spec → any AI tool

Taşınabilir. Hassas. Sizin.

Düz markdown. Halihazırda ödeme yaptığınız herhangi bir yapay zeka aracına yapıştırın. Canlı sayfayı tararız, DOM'u ayrıştırırız, kaydırma durumlarını işleriz, CSS grafiğini çıkarırız ve yapay zekanızın tahmin etmek zorunda kalmayacağı kadar sinyal içeren bir spec üretiriz.

cubic-bezier eğrileri, süreler, gecikmeler — hepsi eşlenir.
Tam yazı tipi ailesi, ağırlığı, boyutu, satır yüksekliği.
Hex-hassas renkler, gradyan durakları, CSS değişkenleri.
Her kesme noktası, sütun daralması, yazı tipi adımı.
shadcn / Radix / MUI / Tailwind parmak izleri.
Next.js, Astro, Vite, Motion, GSAP algılar.
Kaydırma tetikleyicileri ve hover durumları belgelenir.
Yapay zekanızın gerçekten takip edebileceği 6.000+ kelimelik spec.

Yapay zekanız, ona verdiğiniz bağlam kadar iyidir. Ona bir ekran görüntüsü değil, bir spec verin.

Sürecimiz

DevTools'ta derinlemesine inceleme yok. Renk seçimi yok. Konsola dolgu değerleri kaydetme yok. Siteyi altı çıkarma geçişinden geçiririz ve 45 saniyeden kısa sürede size doğruluk kaynağını sunarız.

ALIM

Canlı siteyi getir

Headless Chromium gerçek sayfayı işler — JS değerlendirilir, web yazı tipleri yüklenir, kaydırma durumları yakalanır, ağ çağrıları kaydedilir. Eski ekran görüntüsü yok, kaynak görünümü tahmini yok.

ÇIKARIM

DOM gerçeğini çıkar

Her öğedeki hesaplanmış CSS'i okuruz — tam hex renkleri, yazı tipi ailesi, satır yüksekliği, dolgu, kenar yarıçapı, gölge. Artı ham kopyayı, böylece yapay zeka metni halüsinasyon olarak görmek yerine yeniden üretir.

GÖR

İki geçişli görsel analiz

Bir sınır vizyon modeli ekran görüntülerini okur. Birinci geçiş düzeni, hiyerarşiyi ve bileşen yapısını eşler. İkinci geçiş animasyonları, hover durumlarını ve kaydırma ile tetiklenen hareketleri yakalar.

TANIMLA

Yığını parmak iziyle belirle

DOM desenlerinden ve çalışma zamanı genel değişkenlerinden Next.js, Astro, Vite, Tailwind, shadcn/ui, Radix, Framer Motion, GSAP'i algılarız. Çıktı aynı yığını hedefler, böylece yapay zekanız yerel şekilli kod oluşturur.

OLUŞTUR

Speki sentezle

DOM bulguları + görsel bulgular + yığın parmak izi, yapılandırılmış 6.000 kelimelik bir mühendislik özetinde birleşir — tasarım belirteçleri, düzen ızgarası, animasyon zamanlamaları, duyarlı kesme noktaları, derleme sırası.

GÖNDER

Herhangi bir yapay zeka aracına yapıştır

Düz metin çıktısı — Claude Code, Cursor, Codex, Windsurf, v0, Bolt, Lovable, ChatGPT'de çalışır. Satıcıya bağımlılık yok. İptal etseniz bile spec'in sahibi sonsuza dek sizsiniz.

Ne elde edersiniz?

Her çalıştırma, yapılandırılmış 6.000+ kelimelik bir plan üretir. Bunu Claude Code, Cursor veya Codex'e yapıştırın ve halüsinasyonla oluşturulmuş bir yaklaşıklık değil, çalışan bir uygulama elde edin.

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

Kopyala. Yapay zeka aracınıza yapıştırın. Gönderin.

Teknoloji yığını

Başlıklardan, betik imzalarından ve DOM desenlerinden algılanır. Next.js / Astro / Vite / Remix — açıkta olan sürümleriyle birlikte.

Tasarım belirteçleri

Hex değerleri, CSS özel özellikleri, boşluk ölçeği, yazı tipi metrikleri, border-radius, gölge tanımları — önemli olan her değişken.

Davranış

easing eğrileri, kaydırma tetikleyicileri, hover geçişleri, kesme noktası anahtarları. Bir ekran görüntüsünün yakalayamadığı tasarımın %40'ı.

Neler çıkarıyoruz?

Cilalı bir yapıyı kaba bir kopyadan ayıran sinyal — easing eğrileri, hesaplanmış belirteçler, gerçek bileşen kütüphanesi. Bunu canlı sayfadan çekiyoruz, bir görselden değil.

Düzen ve Boşluk Çıkarımı

Hesaplanmış kutu modellerini, ızgara tanımlarını, boşluk değerlerini, dolguyu ve görsel hiyerarşiyi canlı DOM'dan okur — bir ekran görüntüsünden tahmin etmez.

Tam Renk ve Tip

Hex değerlerini, gradyan duraklarını, CSS özel özelliklerini, yazı tipi ailelerini, ağırlıklarını, boyutlarını ve hesaplanmış satır yüksekliklerini doğrudan render ağacından çeker.

Bileşen Kütüphanesi Algılama

shadcn/ui, Radix, MUI, Headless UI ve Tailwind desenlerini parmak iziyle belirler — böylece spec yapay zekanıza hangi temel öğelere ulaşması gerektiğini söyler.

Animasyon Eğrileri ve Tetikleyicileri

Easing fonksiyonlarını, süreleri, kaydırmaya bağlı efektleri ve hover geçişlerini yakalar — sonra bunları yapay zekanızın uygulayabileceği Motion/GSAP spekleri olarak yazar.

Tam Yığın Parmak İzi

Next.js, Vite, Astro, Remix, analiz betikleri, CDN imzaları ve üçüncü taraf entegrasyonlarını algılar. Başlıklar ifşa ettiğinde tam sürümleri belirtir.

Duyarlı Kesme Noktası Haritası

Her kesme noktasını, flex/grid geçişini, sütun daralmasını ve yazı tipi boyutu adımını belgeler — böylece mobil düzen spec'te sonradan akla gelen bir şey olmaz.

Sorumlu kullanım

İlham, ihlal değil.

CopyDesign.ai bir çalışma ve prototipleme aracıdır. Tasarım desenlerini anlamak, bireysel bileşenleri çıkarmak ve kendi orijinal çalışmanızı hızlandırmak için kullanın. Kötü niyetli kullanımı desteklemiyoruz — marka taklidi, kimlik avı sayfaları, ticari marka veya telif hakkı ihlali yok. Logoyu, adı, metni değiştirin. Onu kendinize ait yapın.

Neden CopyDesign.ai

Speki biz yazarız. Yapay zekanız inşa eder.

Düz markdown çıktısı. Bolt, Lovable, v0, Cursor, Claude Code, Codex ile çalışır — seçim sizin.

Asla araç kilitlenmesi yok.

Spec düz metindir. Bugün Claude Code'a, yarın Codex'e, gelecek hafta Gemini'ye yapıştırın.

$1.99. Tek bir spec. Abonelik gerekmez.

Taahhüt etmeden önce deneyin. Tek seferlik satın alma, anında çıktı.

İlk istemde %90'ı hazır. Dürüstçe.

Piksel mükemmelliği vaat etmiyoruz. Yapay zekanızın tahmin etmeyeceği kadar sinyal vaat ediyoruz.

Belirsiz bir açıklama değil, 6.000 kelimelik yapılandırılmış sinyal.

Teknoloji yığını, tasarım belirteçleri, animasyon spekleri, duyarlı mantık — hepsi tek bir yapıştırmada.

URL istemdir. Ekran görüntüsü almayı bırakın.

Yapay zekanıza yorumlaması gereken bir görsel yerine ihtiyaç duyduğu veriyi verin.

Zanaatı inceleyin. Orijinal bir şey inşa edin.

İlham, ihlal değil. Desenleri çıkarırız — fikri siz getirirsiniz.

Fiyatlandırma

Bir kez ücretsiz deneyin, kart gerekmez. Çıktı kendini gösterdiğinde yükseltin — deneme yok, iade yok.

Ücretsiz

$0/ay

1 klon · sonsuza dek

Başlangıç

$9.99/ay

12 klon / ay

Pro

$19.99/ay

30 klon / ay

Veya 1,99 $'a tek bir spec alın — abonelik yok, yenileme yok.

Tüm fiyatlandırmayı gör

SSS

Sorular, cevaplandı.

CopyDesign.ai'nin ne yaptığı ve ne yapmadığı hakkında net cevaplar.

Giriş duvarlarının arkasındaki uygulamalarda çalışır mı?

Hayır. Yalnızca herkese açık URL'yi getirir ve ekran görüntüsünü alırız. Panolar, yönetici panelleri ve kimlik doğrulamalı akışlar ulaşılamaz. Bunlar için Görüntü veya Mobil moda geçin — ekran görüntülerini kendiniz alın ve yükleyin.

Linear veya Stripe gibi CSS-in-JS sitelerini işleyebilir mi?

Evet. Sayfa render edildikten sonra hesaplanmış stilleri okuruz, kaynak JS'yi değil. Stripe ve Linear, en yüksek doğruluklu çıktılarımızdan ikisidir — CSS-in-JS bir sorun değildir.

WebGL veya yoğun canvas kullanan siteler ne olacak?

Kısmen. Statik düzen, tipografi ve UI chrome temiz bir şekilde çıkarılır. WebGL gölgelendiricileri ve Three.js sahneleri yaklaştırılır — efekti tanımlar ve bir yer tutucu uygulama sağlarız. Tam gölgelendirici replikasyonu yol haritasında değildir.

URL'm herhangi bir yerde saklanıyor mu?

URL'niz, kontrol panelinizde görülebilen klon geçmişinizde saklanır. Satmıyoruz veya paylaşmıyoruz. Analiz sırasında yakalanan ekran görüntüleri, spec oluşturulduktan sonra atılır. Tam bilgi için gizlilik politikasını inceleyin.

Bir 'klon' ne anlama geliyor — yeniden çalıştırmalar ekstra ücrete tabi mi?

Aynı URL'nin yeniden çalıştırılması dahil olmak üzere her Oluşturma tıklaması bir kredi maliyetindedir. Sonuçlar oturumlar arasında önbelleğe alınmaz, bu nedenle yeniden çalıştırma yeni bir spec üretir ve bir kredi çeker.

Tipik bir klon ne kadar sürer?

URL modu: 20–45 saniye. Görüntü ve mobil ekran görüntüsü modu: 10–20 saniye (getirme adımı yok). Video modu: dosya boyutuna bağlı olarak 60–90 saniye. JS ağırlıklı sayfalar daha uzun sürer çünkü tam render için bekleriz.

Mobil uygulamaları ekran görüntülerinden klonlayabilir miyim?

Evet — bu Mobil Uygulama modudur. Herhangi bir iOS veya Android uygulamasından en fazla 10 ekran görüntüsü yükleyin ve React Native ve SwiftUI bileşen rehberliği ile tam bir spec elde edin. Daha fazla ekran, daha eksiksiz bir çıktı anlamına gelir.

Çıktı hangi yapay zeka araçlarıyla çalışır?

Spec düz metindir. Claude Code, Codex, Gemini, Cursor, Windsurf, Replit, v0, Bolt veya ChatGPT'ye yapıştırın. Varsayılan olarak Next.js + Tailwind için biçimlendirilmiştir ancak herhangi bir yığına uyarlanabilecek kadar okunabilirdir.

Yapay zekanıza bir spec verin.
Gözlerinizi kısarak bakacağınız bir ekran görüntüsü değil.

Tek bir URL. 45 saniyenin altında. Yapay zekanızın gerçekten inşa edebileceği 6.000 kelimelik bir spec. İlk olan ücretsiz — kart yok, bekleme listesi yok.

Fiyatlandırmayı gör

Kart yok · İstediğiniz zaman iptal edin · 45 saniyenin altında çıktı