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.

하나의 사양. 모든 AI 코드 도구. 종속성 없음.

모든 웹사이트 디자인을 복사하여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% 완성.

TailwindMotionshadcn/uiThree.jsGSAPWebGLReactNext.js

웹사이트 URL

모든 라이브 사이트 — https://가 없으면 추가됩니다. Enter를 눌러 생성하세요.

무료 계정 — 스펙 1개 포함, 카드 정보 불필요, 1인당 1계정.

예시 보기:

스크롤

이미 사용 중인 모든 AI 코드 도구와 호환됩니다.

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

곧 공개 출시 예정

스크린샷이 실패하는 이유

스크린샷은 AI에게 JPEG 파일과 막연한 기대를 줍니다. 폰트를 환각하고, 간격을 임의로 만들고, 잘못된 컴포넌트 라이브러리를 선택합니다. 우리는 실제 데이터를 제공합니다.

스크린샷 방식screenshot.png → llm → 추측

종속되고, 맹목적인 작업

Bolt, Lovable, v0는 자체 에디터에 가두고 스크린샷이 보여줄 수 없는 모든 것을 환각합니다. 좋은 사양 하나로 막을 수 있었던 일을 세 시간 동안 고치게 됩니다.

애니메이션 사라짐. 스크린샷은 정지된 프레임.
폰트 추측. 주로 system-ui로 결정됨.
색상 육안으로 판단. HSL 드리프트, 잘못된 불투명도.
반응형 레이아웃 임의 생성. 대개 틀림.
컴포넌트 라이브러리: LLM이 원하는 대로.
기술 스택 알 수 없음. 출력은 스타일 없는 div.
스크롤 효과, 호버 상태, 상호작용: 누락됨.
모호한 프롬프트 입력, 모호한 코드 출력.

CopyDesign.aiurl → spec → 모든 AI 도구

휴대 가능. 정밀함. 당신의 것.

일반 마크다운. 이미 비용을 지불하고 있는 모든 AI 도구에 붙여넣으세요. 우리는 라이브 페이지를 크롤링하고, DOM을 파싱하고, 스크롤 상태를 렌더링하고, CSS 그래프를 추출하여 AI가 추측할 필요가 없도록 충분한 신호를 가진 사양을 생성합니다.

cubic-bezier 곡선, 지속 시간, 지연 — 모두 매핑됨.
정확한 폰트 패밀리, 굵기, 크기, 행간.
정확한 Hex 색상, 그라디언트 중지점, CSS vars.
모든 브레이크포인트, 컬럼 축소, 폰트 단계.
shadcn / Radix / MUI / Tailwind 지문 인식.
Next.js, Astro, Vite, Motion, GSAP 감지.
스크롤 트리거 및 호버 상태 문서화.
AI가 실제로 따를 수 있는 6,000단어 이상의 사양.

당신의 AI는 당신이 제공하는 컨텍스트만큼만 좋습니다. 스크린샷이 아닌 사양을 제공하세요.

우리의 프로세스

DevTools 탐색 불필요. 색상 선택 불필요. 패딩 값 콘솔 로깅 불필요. 우리는 사이트를 여섯 번의 추출 과정을 거쳐 45초 이내에 진실의 원천을 제공합니다.

수집

라이브 사이트 가져오기

Headless Chromium이 실제 페이지를 렌더링합니다 — JS 평가, 웹 폰트 로드, 스크롤 상태 캡처, 네트워크 호출 기록. 오래된 스크린샷이나 소스 보기 추측은 없습니다.

추출

DOM 진실 추출

모든 요소의 계산된 CSS를 읽습니다 — 정확한 Hex 색상, 폰트 패밀리, 행간, 패딩, 보더-반경, 그림자. 또한 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-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

복사. AI 도구에 붙여넣기. 배포.

기술 스택

헤더, 스크립트 시그니처 및 DOM 패턴에서 감지됩니다. Next.js / Astro / Vite / Remix — 노출된 경우 버전 포함.

디자인 토큰

Hex 값, CSS 사용자 정의 속성, 간격 스케일, 폰트 측정 기준, 보더-반경, 그림자 정의 — 중요한 모든 변수.

동작

이징 곡선, 스크롤 트리거, 호버 전환, 브레이크포인트 전환. 스크린샷이 캡처할 수 없는 디자인의 40%.

우리가 추출하는 것

정교한 빌드와 대략적인 복사본을 구분하는 신호 — 이징 곡선, 계산된 토큰, 실제 컴포넌트 라이브러리. 우리는 이미지에서가 아닌 라이브 페이지에서 이를 가져옵니다.

레이아웃 및 간격 추출

라이브 DOM에서 계산된 박스 모델, 그리드 정의, 간격 값, 패딩 및 시각적 계층 구조를 읽습니다 — 스크린샷에서 추측하는 것이 아닙니다.

정확한 색상 및 타이포그래피

Hex 값, 그라디언트 중지점, CSS 사용자 정의 속성, 폰트 패밀리, 굵기, 크기 및 계산된 행간을 렌더 트리에서 직접 가져옵니다.

컴포넌트 라이브러리 감지

shadcn/ui, Radix, MUI, Headless UI 및 Tailwind 패턴을 지문 인식합니다 — 따라서 사양은 AI에게 어떤 기본 요소를 사용해야 하는지 알려줍니다.

애니메이션 곡선 및 트리거

이징 함수, 지속 시간, 스크롤 연동 효과 및 호버 전환을 캡처한 다음, AI가 구현할 수 있는 Motion/GSAP 사양으로 작성합니다.

전체 스택 지문 인식

Next.js, Vite, Astro, Remix, 분석 스크립트, CDN 시그니처 및 타사 통합을 감지합니다. 헤더가 노출하는 경우 정확한 버전도 감지합니다.

반응형 브레이크포인트 맵

모든 브레이크포인트, flex/grid 전환, 컬럼 축소 및 폰트 크기 단계를 문서화합니다 — 따라서 모바일 레이아웃이 사양에서 나중에 고려되는 일이 없습니다.

책임감 있는 사용

영감, 침해가 아닙니다.

CopyDesign.ai를 선택해야 하는 이유

우리가 사양을 작성합니다. 당신의 AI가 빌드를 수행합니다.

일반 마크다운 출력. Bolt, Lovable, v0, Cursor, Claude Code, Codex와 호환됩니다 — 당신의 선택입니다.

도구 종속성 없음. 영원히.

사양은 일반 텍스트입니다. 오늘 Claude Code에, 내일 Codex에, 다음 주에는 Gemini에 붙여넣으세요.

$1.99. 하나의 사양. 구독 불필요.

결정하기 전에 사용해 보세요. 일회성 구매, 즉시 출력.

첫 번째 프롬프트에서 90% 완성. 솔직히.

픽셀 완벽을 약속하지 않습니다. AI가 추측하지 않도록 충분한 신호를 약속합니다.

모호한 설명이 아닌 6,000단어의 구조화된 신호.

기술 스택, 디자인 토큰, 애니메이션 사양, 반응형 로직 — 모두 한 번에 붙여넣기.

URL이 프롬프트입니다. 스크린샷 찍는 것을 멈추세요.

AI가 해석해야 하는 이미지 대신 필요한 데이터를 제공하세요.

기술을 연구하세요. 독창적인 것을 만드세요.

영감, 침해가 아닙니다. 우리는 패턴을 추출합니다 — 당신은 아이디어를 가져오세요.

가격

한 번 무료로 사용해 보세요. 카드 정보 불필요. 결과물이 스스로 말할 때 업그레이드하세요 — 체험판 없음, 환불 없음.

무료

$0/월

1 클론 · 영구

스타터

$9.99/월

월 12 클론

프로

$19.99/월

월 30 클론

또는 $1.99에 단일 사양을 구매하세요 — 구독 없음, 갱신 없음.

전체 가격 보기

자주 묻는 질문

질문과 답변.

CopyDesign.ai가 무엇을 하고 무엇을 하지 않는지에 대한 명확한 답변.

로그인 장벽 뒤의 앱에서도 작동하나요?

아니요. 우리는 공개적으로 접근 가능한 URL만 가져오고 스크린샷을 찍습니다. 대시보드, 관리자 패널 및 인증된 흐름은 접근할 수 없습니다. 이러한 경우 이미지 또는 모바일 모드로 전환하여 직접 스크린샷을 찍고 업로드하세요.

Linear 또는 Stripe와 같은 CSS-in-JS 사이트도 처리할 수 있나요?

예. 우리는 페이지 렌더링 후 계산된 스타일을 읽으며, 소스 JS를 읽지 않습니다. Stripe와 Linear는 우리의 가장 높은 충실도 출력 중 두 가지입니다 — CSS-in-JS는 문제가 되지 않습니다.

WebGL 또는 캔버스 사용량이 많은 사이트는 어떻습니까?

부분적으로 가능합니다. 정적 레이아웃, 타이포그래피 및 UI 크롬은 깔끔하게 추출됩니다. WebGL 셰이더 및 Three.js 장면은 근사치로 처리됩니다 — 우리는 효과를 설명하고 플레이스홀더 구현을 제공합니다. 전체 셰이더 복제는 로드맵에 없습니다.

내 URL이 어딘가에 저장되나요?

귀하의 URL은 대시보드에서 볼 수 있는 클론 기록에 저장됩니다. 우리는 이를 판매하거나 공유하지 않습니다. 분석 중에 캡처된 스크린샷은 사양이 생성되면 폐기됩니다. 자세한 내용은 개인정보 처리방침을 참조하세요.

하나의 '클론'은 무엇을 의미하며, 재실행에도 추가 비용이 드나요?

동일한 URL의 재실행을 포함하여 모든 '생성' 클릭은 하나의 크레딧을 소모합니다. 세션 간에 결과가 캐시되지 않으므로 재실행은 새로운 사양을 생성하고 하나의 크레딧을 사용합니다.

일반적인 클론 작업은 얼마나 걸리나요?

URL 모드: 20~45초. 이미지 및 모바일 스크린샷 모드: 10~20초 (가져오기 단계 없음). 비디오 모드: 파일 크기에 따라 60~90초. JS 사용량이 많은 페이지는 전체 렌더링을 기다려야 하므로 더 오래 걸립니다.

스크린샷으로 모바일 앱을 클론할 수 있나요?

예 — 그것이 모바일 앱 모드입니다. 모든 iOS 또는 Android 앱에서 최대 10개의 스크린샷을 업로드하고 React Native 및 SwiftUI 컴포넌트 가이드가 포함된 전체 사양을 얻으세요. 화면이 많을수록 더 완전한 출력이 나옵니다.

출력물이 어떤 AI 도구와 호환되나요?

사양은 일반 텍스트입니다. Claude Code, Codex, Gemini, Cursor, Windsurf, Replit, v0, Bolt 또는 ChatGPT에 붙여넣으세요. 기본적으로 Next.js + Tailwind용으로 포맷되어 있지만 어떤 스택에도 적용할 수 있을 만큼 읽기 쉽습니다.

당신의 AI에게 사양을 제공하세요.
눈을 가늘게 뜨고 봐야 하는 스크린샷이 아닙니다.

하나의 URL. 45초 이내. AI가 실제로 구축할 수 있는 6,000단어 사양. 첫 번째는 무료입니다 — 카드 불필요, 대기 목록 없음.

가격 보기

카드 불필요 · 언제든지 취소 가능 · 45초 이내 출력