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

כתובת האתר

כל אתר פעיל — נוסיף https:// אם חסר. לחץ Enter כדי ליצור.

חשבון חינמי — ספק 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 → any AI tool

נייד. מדויק. שלך.

Markdown רגיל. הדבק אותו לכל כלי AI שאתה כבר משלם עליו. אנו סורקים את הדף החי, מנתחים את ה-DOM, מציגים מצבי גלילה, מחלצים את גרף ה-CSS, ומייצרים מפרט עם מספיק מידע כדי שה-AI שלך לא יצטרך לנחש.

עקומות cubic-bezier, משכים, עיכובים – הכל ממופה.
משפחת גופנים, משקל, גודל, גובה שורה מדויקים.
צבעים מדויקים ב-Hex, נקודות עצירה של גרדיאנט, משתני CSS.
כל נקודת עצירה, קריסת עמודה, שלב גופן.
מזהה shadcn / Radix / MUI / Tailwind.
מזהה Next.js, Astro, Vite, Motion, GSAP.
טריגרי גלילה ומצבי ריחוף מתועדים.
מפרט של 6,000+ מילים שה-AI שלך יכול באמת לעקוב אחריו.

ה-AI שלך טוב רק כמו ההקשר שאתה נותן לו. תן לו מפרט, לא צילום מסך.

התהליך שלנו

ללא חפירה ב-DevTools. ללא בחירת צבעים. ללא רישום ערכי ריפוד בקונסול. אנו מריצים את האתר דרך שישה מעברי חילוץ ומספקים לך את מקור האמת בפחות מ-45 שניות.

קליטה

אחזר את האתר החי

Headless Chromium מציג את הדף האמיתי – JS מוערך, גופני אינטרנט נטענים, מצבי גלילה נלכדים, קריאות רשת מתועדות. ללא צילום מסך מיושן, ללא ניחושים בתצוגת מקור.

חילוץ

חלץ את אמת ה-DOM

אנו קוראים CSS מחושב על כל אלמנט – צבעי hex מדויקים, font-family, line-height, padding, border-radius, shadow. בנוסף את הטקסט הגולמי כדי שה-AI ישחזר טקסט במקום לדמיין אותו.

ראה

ניתוח ויזואלי דו-מעברי

מודל ראייה מתקדם קורא את צילומי המסך. מעבר ראשון ממפה פריסה, היררכיה ומבנה רכיבים. מעבר שני תופס אנימציות, מצבי ריחוף ותנועה המופעלת בגלילה.

זיהוי

זהה את הערימה הטכנולוגית

אנו מזהים Next.js, Astro, Vite, Tailwind, shadcn/ui, Radix, Framer Motion, GSAP – מתבניות DOM ומשתנים גלובליים בזמן ריצה. הפלט מכוון לאותה ערימה כך שה-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 מותאמים אישית, סולם מרווחים, מדדי גופנים, border-radius, הגדרות צל – כל משתנה שחשוב.

התנהגות

עקומות ריכוך, טריגרי גלילה, מעברי ריחוף, מתגי נקודות עצירה. 40% מהעיצוב שצילום מסך לא יכול ללכוד.

מה אנו מחלצים

האות שמפריד בין בנייה מלוטשת לעותק גס – עקומות ריכוך, אסימונים מחושבים, ספריית הרכיבים האמיתית. אנו שולפים אותו מהדף החי, לא מתמונה.

חילוץ פריסה ומרווחים

קורא מודלי תיבה מחושבים, הגדרות רשת, ערכי רווח, ריפוד והיררכיה ויזואלית מה-DOM החי – לא ניחוש מצילום מסך.

צבע וטיפוגרפיה מדויקים

שולף ערכי hex, נקודות עצירה של גרדיאנט, מאפייני CSS מותאמים אישית, משפחות גופנים, משקלים, גדלים וגבהי שורה מחושבים ישירות מעץ הרינדור.

זיהוי ספריית רכיבים

מזהה תבניות shadcn/ui, Radix, MUI, Headless UI ו-Tailwind – כך שהמפרט אומר ל-AI שלך לאילו פרימיטיבים לפנות.

עקומות וטריגרי אנימציה

לוכד פונקציות ריכוך, משכים, אפקטים מקושרים לגלילה ומעברי ריחוף – ואז כותב אותם כמפרטי Motion/GSAP שה-AI שלך יכול ליישם.

זיהוי ערימה טכנולוגית מלאה

מזהה Next.js, Vite, Astro, Remix, סקריפטים אנליטיים, חתימות CDN ואינטגרציות צד שלישי. גרסאות מדויקות כאשר הכותרות חושפות אותן.

מפת נקודות עצירה רספונסיביות

מתעד כל נקודת עצירה, מעבר flex/grid, קריסת עמודה ושלב גודל גופן – כך שפריסת מובייל אינה מחשבה שנייה במפרט.

שימוש אחראי

השראה, לא הפרה.

CopyDesign.ai הוא כלי לימוד ופרוטוטיפים. השתמש בו כדי להבין תבניות עיצוב, לחלץ רכיבים בודדים ולהאיץ את עבודתך המקורית. איננו תומכים בשימוש זדוני – ללא התחזות למותג, ללא דפי פישינג, ללא הפרת סימן מסחר או זכויות יוצרים. החלף את הלוגו, השם, הטקסט. הפוך אותו לשלך.

למה CopyDesign.ai

אנחנו כותבים את המפרט. ה-AI שלך בונה.

פלט Markdown רגיל. עובד עם Bolt, Lovable, v0, Cursor, Claude Code, Codex – הבחירה שלך.

ללא נעילת כלי. לעולם.

המפרט הוא טקסט רגיל. הדבק אותו ל-Claude Code היום, ל-Codex מחר, ל-Gemini בשבוע הבא.

$1.99. מפרט אחד. ללא צורך במנוי.

נסה לפני שאתה מתחייב. רכישה חד פעמית, פלט מיידי.

90% מוכן כבר בפרומפט הראשון. בכנות.

אנחנו לא מבטיחים דיוק פיקסל מושלם. אנחנו מבטיחים מספיק מידע כדי שה-AI שלך לא ינחש.

6,000 מילים של מידע מובנה, לא תיאור מעורפל.

ערימה טכנולוגית, אסימוני עיצוב, מפרטי אנימציה, לוגיקה רספונסיבית – הכל בהדבקה אחת.

כתובת האתר היא הפרומפט. הפסק לצלם מסך.

תן ל-AI שלך את הנתונים שהוא צריך במקום תמונה שהוא צריך לפרש.

למד את המלאכה. בנה משהו מקורי.

השראה, לא הפרה. אנו מחלצים תבניות – אתה מביא את הרעיון.

תמחור

נסה פעם אחת, בחינם, ללא צורך בכרטיס. שדרג כשהפלט מדבר בעד עצמו – ללא תקופות ניסיון, ללא החזרים.

חינם

$0/לחודש

שיבוט 1 · לנצח

מתחילים

$9.99/לחודש

12 שיבוטים / חודש

פרו

$19.99/לחודש

30 שיבוטים / חודש

או קח מפרט בודד ב-$1.99 – ללא מנוי, ללא חידוש.

ראה תמחור מלא

שאלות נפוצות

שאלות, נענו.

תשובות ישירות על מה CopyDesign.ai עושה, ומה לא.

האם זה עובד על אפליקציות שמאחורי חומת התחברות?

לא. אנו מאחזרים ומצלמים מסך רק את כתובת האתר הפונה לציבור. לוחות מחוונים, לוחות ניהול ותהליכי אימות אינם נגישים. עבור אלה, עבור למצב תמונה או נייד – צלם את צילומי המסך בעצמך והעלה אותם.

האם זה יכול לטפל באתרים עם CSS-in-JS כמו Linear או Stripe?

כן. אנו קוראים סגנונות מחושבים לאחר שהדף נטען, לא את קוד ה-JS המקורי. Stripe ו-Linear הם שניים מהפלטים האיכותיים ביותר שלנו – CSS-in-JS אינו בעיה.

מה לגבי אתרים עם WebGL או קנבס כבד?

חלקית. פריסה סטטית, טיפוגרפיה ועיצוב ממשק משתמש מחולצים בצורה נקייה. WebGL shaders וסצנות Three.js מקורבים – אנו מתארים את האפקט ומספקים יישום חלופי. שכפול מלא של shaders אינו בתוכנית העבודה.

האם כתובת האתר שלי נשמרת איפשהו?

כתובת האתר שלך נשמרת בהיסטוריית השיבוטים שלך, גלויה בלוח המחוונים שלך. איננו מוכרים או משתפים אותה. צילומי מסך שנלכדו במהלך הניתוח נמחקים לאחר יצירת המפרט. ראה את מדיניות הפרטיות לתמונה המלאה.

מה נחשב ל'שיבוט' אחד – האם הרצות חוזרות עולות בתוספת תשלום?

כל לחיצה על 'צור' עולה קרדיט אחד, כולל הרצות חוזרות של אותה כתובת אתר. התוצאות אינן נשמרות במטמון בין הפעלות, ולכן הרצה חוזרת מייצרת מפרט חדש וגובה קרדיט אחד.

כמה זמן לוקח שיבוט טיפוסי?

מצב URL: 20–45 שניות. מצב תמונה וצילום מסך נייד: 10–20 שניות (ללא שלב אחזור). מצב וידאו: 60–90 שניות בהתאם לגודל הקובץ. דפים עתירי JS לוקחים יותר זמן מכיוון שאנו ממתינים לרינדור מלא.

האם אני יכול לשבט אפליקציות מובייל מצילומי מסך?

כן – זהו מצב אפליקציה ניידת. העלה עד 10 צילומי מסך מכל אפליקציית iOS או Android וקבל מפרט מלא עם הנחיות לרכיבי React Native ו-SwiftUI. יותר מסכים פירושם פלט שלם יותר.

עם אילו כלי AI הפלט עובד?

המפרט הוא טקסט רגיל. הדבק אותו ל-Claude Code, Codex, Gemini, Cursor, Windsurf, Replit, v0, Bolt, או ChatGPT. הוא מעוצב עבור Next.js + Tailwind כברירת מחדל אך קריא מספיק כדי להתאים לכל ערימה טכנולוגית.

תן ל-AI שלך מפרט.
לא צילום מסך להתכווץ ממנו.

כתובת אתר אחת. פחות מ-45 שניות. מפרט בן 6,000 מילים שה-AI שלך יכול באמת לבנות ממנו. הראשון בחינם – ללא כרטיס, ללא רשימת המתנה.

ראה תמחור

ללא כרטיס · בטל בכל עת · פלט בפחות מ-45 שניות