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 инженерную спецификацию на 6000 слов. Drop it into Claude Code, Codex, Cursor, or Gemini and get 90% готовности с первого запроса.

TailwindMotionshadcn/uiThree.jsGSAPWebGLReactNext.js

URL сайта

Любой рабочий сайт — добавим 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

Скоро публичный запуск

Почему скриншоты не работают

Скриншот дает вашему ИИ JPEG и надежду. Он галлюцинирует шрифт, придумывает отступы и выбирает не ту библиотеку компонентов. Мы даем ему реальные данные.

Подход со скриншотамиscreenshot.png → llm → догадки

Привязаны, работаете вслепую

Bolt, Lovable, v0 заманивают вас в свои редакторы и галлюцинируют все, что скриншот не может показать. Вы тратите три часа на исправление того, что одна хорошая спецификация могла бы предотвратить.

Анимации отсутствуют. Скриншот — это замороженный кадр.
Шрифты угадываются. Обычно используется system-ui.
Цвета определяются на глаз. Смещение HSL, неверная прозрачность.
Адаптивный макет придумывается. Обычно неверно.
Библиотека компонентов: что угодно, что выберет LLM.
Технологический стек неизвестен. Вывод — нестилизованные divs.
Эффекты прокрутки, состояния наведения, взаимодействия: потеряны.
Нечеткий запрос на входе, нечеткий код на выходе.

CopyDesign.aiurl → spec → любой инструмент ИИ

Портативно. Точно. Ваше.

Обычный Markdown. Вставьте его в любой инструмент ИИ, за который вы уже платите. Мы сканируем живую страницу, анализируем DOM, отображаем состояния прокрутки, извлекаем граф CSS и создаем спецификацию с достаточным количеством сигналов, чтобы вашему ИИ не пришлось гадать.

Кривые cubic-bezier, длительности, задержки — все отображено.
Точное семейство шрифтов, начертание, размер, межстрочный интервал.
Цвета с точностью до шестнадцатеричного значения, точки градиента, переменные CSS.
Каждая точка останова, свертывание столбцов, шаг шрифта.
Определяет shadcn / Radix / MUI / Tailwind.
Обнаруживает Next.js, Astro, Vite, Motion, GSAP.
Триггеры прокрутки и состояния наведения задокументированы.
Спецификация более чем на 6000 слов, которой ваш ИИ действительно может следовать.

Ваш ИИ настолько хорош, насколько хорош контекст, который вы ему даете. Дайте ему спецификацию, а не скриншот.

Наш процесс

Никакого копания в DevTools. Никакого подбора цветов. Никакого логирования значений отступов в консоли. Мы пропускаем сайт через шесть этапов извлечения и передаем вам источник истины менее чем за 45 секунд.

ПРИЕМ

Получение живого сайта

Headless Chromium отображает реальную страницу — JS оценивается, веб-шрифты загружаются, состояния прокрутки фиксируются, сетевые вызовы регистрируются. Никаких устаревших скриншотов, никаких догадок по исходному коду.

ИЗВЛЕЧЕНИЕ

Извлечение истинного DOM

Мы считываем вычисленные CSS для каждого элемента — точные шестнадцатеричные цвета, семейство шрифтов, межстрочный интервал, отступы, радиус границы, тень. Плюс необработанный текст, чтобы ИИ воспроизводил его, а не галлюцинировал.

ВИЗУАЛИЗАЦИЯ

Двухпроходный визуальный анализ

Модель передового зрения считывает скриншоты. Первый проход отображает макет, иерархию и структуру компонентов. Второй проход фиксирует анимации, состояния наведения и движения, запускаемые прокруткой.

ИДЕНТИФИКАЦИЯ

Определение стека

Мы обнаруживаем Next.js, Astro, Vite, Tailwind, shadcn/ui, Radix, Framer Motion, GSAP — по паттернам DOM и глобальным переменным среды выполнения. Вывод нацелен на тот же стек, чтобы ваш ИИ создавал код, соответствующий нативной форме.

КОМПОНОВКА

Синтез спецификации

Находки DOM + визуальные находки + определение стека объединяются в структурированный инженерный бриф на 6000 слов — токены дизайна, сетка макета, тайминги анимации, адаптивные точки останова, порядок сборки.

ОТПРАВКА

Вставьте в любой инструмент ИИ

Вывод в виде обычного текста — работает в Claude Code, Cursor, Codex, Windsurf, v0, Bolt, Lovable, ChatGPT. Без привязки к поставщику. Вы владеете спецификацией навсегда, даже если отмените подписку.

Что вы получаете

Каждый запуск создает структурированный чертеж объемом более 6000 слов. Вставьте его в 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

Скопируйте. Вставьте в ваш инструмент ИИ. Отправьте.

Технологический стек

Определяется по заголовкам, сигнатурам скриптов и паттернам DOM. Next.js / Astro / Vite / Remix — с версиями, где они доступны.

Токены дизайна

Шестнадцатеричные значения, пользовательские свойства CSS, шкала отступов, метрики шрифтов, радиус границы, определения теней — каждая важная переменная.

Поведение

кривые сглаживания, триггеры прокрутки, переходы при наведении, переключения точек останова. Те 40% дизайна, которые скриншот не может захватить.

Что мы извлекаем

Сигнал, который отличает отполированную сборку от грубой копии — кривые сглаживания, вычисленные токены, фактическая библиотека компонентов. Мы извлекаем это с живой страницы, а не из изображения.

Извлечение макета и отступов

Считывает вычисленные блочные модели, определения сеток, значения отступов, внутренние отступы и визуальную иерархию из живого DOM — а не догадки по скриншоту.

Точный цвет и типографика

Извлекает шестнадцатеричные значения, точки градиента, пользовательские свойства CSS, семейства шрифтов, начертания, размеры и вычисленные межстрочные интервалы прямо из дерева рендеринга.

Обнаружение библиотеки компонентов

Определяет паттерны shadcn/ui, Radix, MUI, Headless UI и Tailwind — чтобы спецификация сообщала вашему ИИ, какие примитивы использовать.

Кривые и триггеры анимации

Захватывает функции сглаживания, длительности, эффекты, связанные с прокруткой, и переходы при наведении — затем записывает их как спецификации Motion/GSAP, которые ваш ИИ может реализовать.

Полное определение стека

Обнаруживает Next.js, Vite, Astro, Remix, скрипты аналитики, сигнатуры CDN и сторонние интеграции. Точные версии, если заголовки их раскрывают.

Карта адаптивных точек останова

Документирует каждую точку останова, переключение flex/grid, свертывание столбцов и шаг размера шрифта — чтобы мобильный макет не был второстепенной мыслью в спецификации.

Ответственное использование

Вдохновение, а не нарушение.

CopyDesign.ai — это инструмент для изучения и прототипирования. Используйте его для понимания паттернов дизайна, извлечения отдельных компонентов и ускорения вашей собственной оригинальной работы. Мы не поддерживаем злонамеренное использование — никаких выдач себя за бренд, никаких фишинговых страниц, никаких нарушений товарных знаков или авторских прав. Замените логотип, название, текст. Сделайте это своим.

Почему CopyDesign.ai

Мы пишем спецификацию. Ваш ИИ занимается сборкой.

Вывод в виде обычного Markdown. Работает с Bolt, Lovable, v0, Cursor, Claude Code, Codex — ваш выбор.

Никакой привязки к инструменту. Никогда.

Спецификация — это обычный текст. Вставьте ее в Claude Code сегодня, в Codex завтра, в Gemini на следующей неделе.

$1.99. Одна спецификация. Подписка не требуется.

Попробуйте, прежде чем брать на себя обязательства. Единоразовая покупка, немедленный результат.

90% готовности с первого запроса. Честно.

Мы не обещаем идеальной точности до пикселя. Мы обещаем достаточно сигналов, чтобы ваш ИИ не гадал.

6000 слов структурированного сигнала, а не расплывчатое описание.

Технологический стек, токены дизайна, спецификации анимации, адаптивная логика — все в одной вставке.

URL — это запрос. Хватит делать скриншоты.

Дайте вашему ИИ данные, которые ему нужны, вместо изображения, которое он должен интерпретировать.

Изучайте мастерство. Создавайте что-то оригинальное.

Вдохновение, а не нарушение. Мы извлекаем паттерны — вы приносите идею.

Цены

Попробуйте один раз бесплатно, карта не требуется. Обновите, когда результат скажет сам за себя — никаких пробных версий, никаких возвратов.

Бесплатно

$0/мес

1 клон · навсегда

Стартовый

$9.99/мес

12 клонов / месяц

Про

$19.99/мес

30 клонов / месяц

Или получите одну спецификацию за $1.99 — без подписки, без продления.

Посмотреть все цены

Часто задаваемые вопросы

Вопросы, ответы.

Прямые ответы о том, что CopyDesign.ai делает, а что нет.

Работает ли это с приложениями, требующими входа?

Нет. Мы получаем и делаем скриншоты только общедоступных URL. Панели управления, админ-панели и аутентифицированные потоки недоступны. Для них переключитесь в режим «Изображение» или «Мобильный» — сделайте скриншоты самостоятельно и загрузите их.

Может ли он работать с сайтами, использующими CSS-in-JS, такими как Linear или Stripe?

Да. Мы считываем вычисленные стили после рендеринга страницы, а не исходный JS. Stripe и Linear — два из наших самых высокоточных результатов — CSS-in-JS не является проблемой.

Что насчет сайтов с интенсивным использованием WebGL или canvas?

Частично. Статический макет, типографика и элементы пользовательского интерфейса извлекаются чисто. Шейдеры WebGL и сцены Three.js аппроксимируются — мы описываем эффект и предоставляем заглушку для реализации. Полное воспроизведение шейдеров не входит в планы.

Сохраняется ли мой URL где-либо?

Ваш URL хранится в истории клонирования, видимой на вашей панели управления. Мы не продаем и не передаем его. Скриншоты, сделанные во время анализа, удаляются после генерации спецификации. Полную информацию см. в политике конфиденциальности.

Что считается одним 'клоном' — повторные запуски стоят дополнительно?

Каждый клик «Сгенерировать» стоит один кредит, включая повторные запуски одного и того же URL. Результаты не кэшируются между сеансами, поэтому повторный запуск создает новую спецификацию и расходует один кредит.

Сколько времени занимает типичное клонирование?

Режим URL: 20–45 секунд. Режим изображения и мобильного скриншота: 10–20 секунд (без шага получения). Режим видео: 60–90 секунд в зависимости от размера файла. Страницы с большим количеством JS занимают больше времени, потому что мы ждем полной отрисовки.

Могу ли я клонировать мобильные приложения по скриншотам?

Да — это режим мобильного приложения. Загрузите до 10 скриншотов из любого приложения iOS или Android и получите полную спецификацию с рекомендациями по компонентам React Native и SwiftUI. Больше экранов означает более полный результат.

С какими инструментами ИИ работает вывод?

Спецификация — это обычный текст. Вставьте ее в Claude Code, Codex, Gemini, Cursor, Windsurf, Replit, v0, Bolt или ChatGPT. По умолчанию она отформатирована для Next.js + Tailwind, но достаточно читаема, чтобы адаптироваться к любому стеку.

Дайте вашему ИИ спецификацию.
Не скриншот, на который нужно щуриться.

Один URL. Менее 45 секунд. Спецификация на 6000 слов, по которой ваш ИИ действительно может строить. Первая бесплатно — без карты, без списка ожидания.

Посмотреть цены

Без карты · Отмена в любое время · Результат менее чем за 45 секунд