Copia cualquier diseño web en una especificación de construcción de IA.
Paste a URL and we copy any website design into a especificación de ingeniería de 6,000 palabras. Drop it into Claude Code, Codex, Cursor, or Gemini and get 90% listo en la primera solicitud.
Cualquier sitio activo — añadimos https:// si falta. Pulsa Intro para generar.
Cuenta gratis — 1 spec incluido, sin tarjeta, una cuenta por persona.
Prueba un ejemplo:
Funciona con cada herramienta de código de IA que ya utilizas.
Lanzamiento público pronto
Una captura de pantalla le da a tu IA un jpeg y una oración. Alucina la fuente, inventa el espaciado y elige la biblioteca de componentes incorrecta. Nosotros le damos los datos reales.
Atrapado, a ciegas
Bolt, Lovable, v0 te atrapan en su editor y alucinan todo lo que la captura de pantalla no puede mostrar. Pasas tres horas arreglando lo que una buena especificación habría evitado.
- Animaciones perdidas. La captura de pantalla es un fotograma congelado.
- Fuentes adivinadas. Generalmente termina en system-ui.
- Colores estimados a ojo. Desviación HSL, opacidad incorrecta.
- Diseño responsivo inventado. Generalmente incorrecto.
- Biblioteca de componentes: lo que el LLM decida.
- Pila tecnológica desconocida. La salida son divs sin estilo.
- Efectos de desplazamiento, estados de hover, interacciones: omitidos.
- Solicitud vaga, código vago.
Portátil. Preciso. Tuyo.
Markdown simple. Pégalo en cualquier herramienta de IA por la que ya pagas. Rastreamos la página en vivo, analizamos el DOM, renderizamos los estados de desplazamiento, extraemos el gráfico CSS y producimos una especificación con suficiente señal para que tu IA no tenga que adivinar.
- Curvas cubic-bezier, duraciones, retrasos — todo mapeado.
- Familia de fuente, peso, tamaño, altura de línea exactos.
- Colores hex-precisos, paradas de gradiente, variables CSS.
- Cada punto de interrupción, colapso de columna, paso de fuente.
- Identifica shadcn / Radix / MUI / Tailwind.
- Detecta Next.js, Astro, Vite, Motion, GSAP.
- Activadores de desplazamiento y estados de hover documentados.
- Especificación de más de 6,000 palabras que tu IA puede seguir.
Tu IA es tan buena como el contexto que le das. Dale una especificación, no una captura de pantalla.
Sin exploración de DevTools. Sin selección de colores. Sin registro de valores de relleno en la consola. Ejecutamos el sitio a través de seis pasadas de extracción y te entregamos la fuente de la verdad en menos de 45 segundos.
Obtener el sitio en vivo
Headless Chromium renderiza la página real — JS evaluado, fuentes web cargadas, estados de desplazamiento capturados, llamadas de red registradas. Sin captura de pantalla obsoleta, sin adivinanzas de la vista de origen.
Extraer la verdad del DOM
Leemos el CSS calculado en cada elemento — colores hex exactos, familia de fuente, altura de línea, relleno, border-radius, sombra. Además del texto sin formato para que la IA reproduzca el texto en lugar de alucinarlo.
Análisis visual de dos pasadas
Un modelo de visión de vanguardia lee las capturas de pantalla. La primera pasada mapea el diseño, la jerarquía y la estructura de los componentes. La segunda pasada detecta animaciones, estados de hover y movimiento activado por desplazamiento.
Identificar la pila tecnológica
Detectamos Next.js, Astro, Vite, Tailwind, shadcn/ui, Radix, Framer Motion, GSAP — a partir de patrones DOM y globales de tiempo de ejecución. La salida apunta a la misma pila para que tu IA construya código con forma nativa.
Sintetizar la especificación
Los hallazgos del DOM + los hallazgos visuales + la identificación de la pila se fusionan en un informe de ingeniería estructurado de 6,000 palabras — tokens de diseño, cuadrícula de diseño, tiempos de animación, puntos de interrupción responsivos, orden de construcción.
Pegar en cualquier herramienta de IA
Texto plano de salida — funciona en Claude Code, Cursor, Codex, Windsurf, v0, Bolt, Lovable, ChatGPT. Sin dependencia del proveedor. Eres dueño de la especificación para siempre, incluso si cancelas.
Cada ejecución produce un plano estructurado de más de 6,000 palabras. Pégalo en Claude Code, Cursor o Codex y obtén una implementación funcional, no una aproximación alucinada.
# 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
Pila tecnológica
Detectado a partir de encabezados, firmas de scripts y patrones DOM. Next.js / Astro / Vite / Remix — con versiones cuando estén expuestas.
Tokens de diseño
Valores hex, propiedades personalizadas CSS, escala de espaciado, métricas de fuente, border-radius, definiciones de sombra — cada variable importante.
Comportamiento
Curvas de easing, activadores de desplazamiento, transiciones de hover, cambios de punto de interrupción. El 40% del diseño que una captura de pantalla no puede capturar.
La señal que separa una construcción pulida de una copia tosca — curvas de easing, tokens calculados, la biblioteca de componentes real. Lo extraemos de la página en vivo, no de una imagen.
Extracción de Diseño y Espaciado
Lee modelos de caja calculados, definiciones de cuadrícula, valores de espaciado, relleno y jerarquía visual del DOM en vivo, no una suposición de una captura de pantalla.
Color y Tipografía Exactos
Extrae valores hex, paradas de gradiente, propiedades personalizadas CSS, familias de fuentes, pesos, tamaños y alturas de línea calculadas directamente del árbol de renderizado.
Detección de Biblioteca de Componentes
Identifica patrones de shadcn/ui, Radix, MUI, Headless UI y Tailwind — para que la especificación le diga a tu IA qué primitivas usar.
Curvas y Activadores de Animación
Captura funciones de easing, duraciones, efectos vinculados al desplazamiento y transiciones de hover — luego los escribe como especificaciones de Motion/GSAP que tu IA puede implementar.
Identificación Completa de la Pila
Detecta Next.js, Vite, Astro, Remix, scripts de análisis, firmas CDN e integraciones de terceros. Versiones exactas cuando los encabezados las exponen.
Mapa de Puntos de Interrupción Responsivos
Documenta cada punto de interrupción, cambio de flex/grid, colapso de columna y paso de tamaño de fuente — para que el diseño móvil no sea una ocurrencia tardía en la especificación.
Inspiración, no infracción.
CopyDesign.ai es una herramienta de estudio y prototipado. Úsala para entender patrones de diseño, extraer componentes individuales y acelerar tu propio trabajo original. No apoyamos el uso malintencionado — sin suplantación de marca, sin páginas de phishing, sin infracción de marcas registradas o derechos de autor. Cambia el logotipo, el nombre, el texto. Hazlo tuyo.
Nosotros escribimos la especificación. Tu IA construye.
Salida en markdown simple. Funciona con Bolt, Lovable, v0, Cursor, Claude Code, Codex — tú decides.
Sin dependencia de herramientas. Nunca.
La especificación es texto plano. Pégala en Claude Code hoy, Codex mañana, Gemini la próxima semana.
$1.99. Una especificación. No se requiere suscripción.
Pruébalo antes de comprometerte. Compra única, salida inmediata.
90% listo en la primera solicitud. Sincero.
No prometemos perfección de píxeles. Prometemos suficiente señal para que tu IA no adivine.
6,000 palabras de señal estructurada, no una descripción vaga.
Pila tecnológica, tokens de diseño, especificaciones de animación, lógica responsiva — todo en un solo pegado.
La URL es la solicitud. Deja de tomar capturas de pantalla.
Dale a tu IA los datos que necesita en lugar de una imagen que tiene que interpretar.
Estudia el oficio. Construye algo original.
Inspiración, no infracción. Nosotros extraemos patrones — tú aportas la idea.
Pruébalo una vez, gratis, sin tarjeta. Actualiza cuando la salida hable por sí misma — sin pruebas, sin reembolsos.
Gratis
1 clon · para siempre
Básico
12 clones / mes
Pro
30 clones / mes
Preguntas, respondidas.
Respuestas directas sobre lo que hace CopyDesign.ai y lo que no hace.
¿Funciona en aplicaciones detrás de muros de inicio de sesión?
¿Puede manejar sitios con CSS-in-JS como Linear o Stripe?
¿Qué pasa con los sitios con WebGL o mucho canvas?
¿Se almacena mi URL en algún lugar?
¿Qué cuenta como un 'clon' — las repeticiones cuestan extra?
¿Cuánto tiempo tarda un clon típico?
¿Puedo clonar aplicaciones móviles a partir de capturas de pantalla?
¿Con qué herramientas de IA funciona la salida?
Dale a tu IA una especificación.
No una captura de pantalla para entrecerrar los ojos.
Una URL. En menos de 45 segundos. Una especificación de 6,000 palabras de la que tu IA puede construir. La primera es gratis — sin tarjeta, sin lista de espera.
Sin tarjeta · Cancela en cualquier momento · Salida en menos de 45 segundos