decoy-frontend

Constructor de Demos con Estilo

Convierte cualquier producto en una hermosa landing page demo que toma prestado el estilo visual de un sitio web de referencia — su paleta, tipografía, patrones de layout y movimiento — mientras cuenta la propia historia del producto.

Regla de oro: clonar el estilo, nunca el contenido. El sitio de referencia provee la apariencia; el sitio/producto del usuario provee las palabras. El resultado no debe reproducir el texto del sitio de referencia, ni debe simplemente cambiar la piel del diseño existente del usuario — debe ser una página fresca en el estilo prestado.

Este es el error #1. Copiar la paleta del sitio de referencia pero mantener el esqueleto de secciones del sitio del usuario (sus bloques numerados de características, sus motivos de tarjetas, su orden) produce una página que sigue leyéndose como el sitio original del usuario con nuevos colores. Recolorear no es reestilizar. Debes tomar prestado el esqueleto de layout y los componentes característicos del sitio de referencia, no solo sus valores hex. Investiga siempre también la estructura del sitio del USUARIO (Paso 2) para saber de qué debes divergir.

Patrones de layout soportados (elige según la solicitud):

• Estilo único prestado — toda la página con la apariencia de una referencia.
• Tour de estilos sección por sección — cada sección toma prestada la identidad de un sitio diferente (ej. hero → projectdiscovery, precios → linear, CTA → superhuman). Dale a cada <section> su propio bloque de tema con alcance: fondo, acento, tipo, radio y un componente característico. Ideal cuando el usuario dice "cada sección con su propio tema". Mantenlas coherentes (ej. todo oscuro) a menos que quieran contraste.

Kit de herramientas (incluido con este skill — úsalo, no lo rederives)

Las rutas son relativas al directorio de este skill. Prefiérelas a escribir desde cero; codifican los problemas que se explican más abajo para que no los vuelvas a encontrar.

• template/ — un andamio construible Next 14 + GSAP + Lenis con la capa de movimiento ya conectada (SmoothScroll, ScrollProgress, Reveal, globals.css tokenizado, un page.tsx inicial). Cada compilación comienza aquí.
• template-html/index.html — los mismos tokens + capa de movimiento en UN solo archivo autónomo (GSAP/Lenis vía CDN). Úsalo cuando el usuario elija salida en un solo archivo HTML; no necesita scaffold/instalación.
• scripts/new-demo.sh <dest> — copia la plantilla a <dest> y ejecuta npm install.
• scripts/verify.sh <dir> — el Paso 5 como script: se niega a compilar mientras next dev está en ejecución, verifica tipos, compila la exportación estática, busca en out/index.html.
• scripts/extract-style.js — ejecútalo en una página de referencia abierta mediante la herramienta javascript_tool de Chrome para extraer fuentes/colores/radios/escala reales en un borrador de especificación (Paso 2).
• scripts/shoot.mjs <url> — capturas de pantalla headless con Playwright, solo para sandboxes sin pantalla o CI. Localmente, haz capturas de pantalla con las herramientas de Chrome.
• scripts/deploy.sh [dir] [--prod] — envía el directorio estático compilado (out/, o la carpeta del archivo HTML único) a una URL pública. Vercel por defecto; como son archivos estáticos, cualquier servidor funciona. Orientado al exterior — compila primero y confirma con el usuario antes de --prod.
• scripts/audit.sh <url> — Puntuaciones Lighthouse (rendimiento/accesibilidad/mejores prácticas/SEO) contra un servidor de desarrollo o un despliegue.
• references/patterns.md — recetas de animación + planos de componentes característicos, elegidos según la energía del sitio de referencia.

Paso 1 — Entrevista al usuario (haz esto primero)

Usa la herramienta AskUserQuestion. Haz estas preguntas juntas. Las dos primeras son de texto libre (indica al usuario que las escriba mediante el campo "Otro" o que responda en el chat); el resto son de opción múltiple con opciones sensatas. Siempre incluye una opción "añadir el tuyo".

1. Tu sitio web / producto — una URL (ej. www.acme.com) o una breve descripción. Esta es la fuente del contenido.
2. Sitio(s) web de referencia — una o más URLs cuyo estilo tomar prestado (ej. granola.ai, linear.app, stripe.com). Esta es la fuente de la apariencia.
3. Estilo de fuente (selección múltiple) — ej. Serifa editorial · Sans-serif limpia · Monospace/técnica · Redondeada/amigable · Coincidir con la referencia.
4. Tema (opcional, selección múltiple) — ej. Claro / papel · Oscuro / cinematográfico · Bloque de color audaz · Mínimo / mucho espacio en blanco · Coincidir con la referencia.

Añade estas preguntas adicionales (cambian materialmente el resultado):

5. Vibra / tono — Tranquila y editorial · Cinematográfica y dramática · Juguetona y optimista · Corporativa y confiable.
6. Nivel de movimiento — Sutil (revelaciones suaves) · Animación de scroll rica (parallax, secciones vinculadas al scroll) · Interactiva (demo clicable que el visitante maneja). Por defecto: Animación de scroll rica.
7. Color de acento — Coincidir con la referencia · un color específico · déjame elegir.
8. Profundidad — Hero + unas pocas secciones · Historia completa (cuenta todo: cómo funciona, características, prueba, CTA). Por defecto: Historia completa.
9. Salida — Proyecto Next.js ejecutable (recomendado) · Un solo archivo HTML autónomo.

Si el usuario ya proporcionó algunas respuestas en su mensaje, no las vuelvas a preguntar.

Paso 2 — Investiga el sitio(s) de referencia

Debes mirar realmente la referencia, no adivinar.

1. Intenta primero mcp__workspace__web_fetch. Los sitios de marketing suelen renderizarse en el cliente, por lo que a menudo devuelve vacío — es esperado.
2. Cambia a las herramientas del navegador Chrome (carga mediante ToolSearch si está diferido): navigate → get_page_text para obtener copia/estructura, luego capturas de pantalla computer (desplázate hacia abajo y captura 3–5 fotogramas) para leer el lenguaje visual real. Descarta los avisos de cookies con la opción que más respete la privacidad.
3. Obtén un borrador de evidencia rápido: pega scripts/extract-style.js en la herramienta javascript_tool de Chrome en la página de referencia abierta — devuelve fuentes reales, frecuencias de color, la escala tipográfica y radios. Luego escribe la especificación de estilo corta (rellena el esquema en references/style-extraction.md): fondo, paleta + acento, emparejamiento tipográfico, patrones de sección/layout, componentes característicos (ej. maquetas de producto flotantes) y carácter de movimiento. El script captura valores que el ojo juzga mal; tus capturas de pantalla capturan el layout y las "señas" características. Usa ambos.
4. Lee también el sitio del usuario de la misma manera — para obtener el contenido real del producto y para anotar su propio esqueleto de layout/sección, fuentes y pie de página. Necesitas esto para poder divergir deliberadamente de él (tomar prestada la estructura de la referencia, no la del producto) y para poder reutilizar el pie de página real/texto legal del producto textualmente en lugar de inventar uno.
5. Contenido no latino: si el texto del producto incluye devanagari, CJK, árabe, cirílico, etc. (ej. un demo con alternancia de hindi e inglés), anótalo ahora — debes cargar una fuente que cubra esa escritura (ver el apartado Errores de la guía de compilación).

Si un dominio no se puede obtener o está bloqueado, informa al usuario y continúa a partir de capturas de pantalla / su descripción — nunca intentes eludir la restricción de obtención.

Paso 3 — Planifica

Asigna el contenido del producto del usuario a los patrones estructurales de la referencia. Haz un breve esquema de secciones. Elige fuentes (las Google Fonts gratuitas más cercanas a la referencia), la paleta y el plan de movimiento. Confirma cualquier cosa realmente ambigua, luego construye.

Paso 4 — Construye

Stack por defecto: Next.js 14 (App Router, exportación estática) + GSAP ScrollTrigger + Lenis, CSS escrito a mano con tokens de diseño al inicio de globals.css.

Andamio a partir de la plantilla — no escribas el stack a mano. Ejecuta scripts/new-demo.sh <dest>; copia template/ (la capa de movimiento ya conectada y se sabe que compila) e instala las dependencias. Luego:

1. Establece los tokens de diseño en app/globals.css :root a partir de tu especificación de estilo, y cambia las fuentes en app/layout.tsx por las Google Fonts coincidentes.
2. Reemplaza app/page.tsx con las secciones reales — el contenido del usuario asignado al esqueleto de layout de la referencia (no al del sitio del usuario).
3. Construye el componente característico y elige 2–4 recetas de movimiento de references/patterns.md; references/build-guide.md tiene los iniciadores para fichas adhesivas y maquetas. Reutiliza .rise, [data-speed] y <Reveal> para el resto.

Si el usuario eligió un solo archivo HTML, comienza desde template-html/index.html (mismos tokens + capa de movimiento, GSAP/Lenis vía CDN, sin instalación) y reemplaza su contenido. Consulta las notas sobre el tour sección por sección en la guía de compilación para una variante multi-tema.

Respeta siempre prefers-reduced-motion. Mantén la sensación de la referencia pero escribe marcado y texto originales.

Paso 5 — Verifica

Ejecuta scripts/verify.sh <dir> — verifica tipos, compila la exportación estática y busca en out/index.html. Añade tus propias búsquedas para el texto real del producto, el valor hex del acento y el nombre de la fuente (el script te lo recuerda). Corrige cualquier cosa hasta que esté en verde.

Mira el resultado. En una sesión local puedes verlo renderizado: inicia npm run dev, apunta las herramientas de Chrome a http://localhost:3000 y toma una captura computer (desplázate). Esta es la verificación de calidad real — hazlo, no confíes solo en la búsqueda. En un sandbox sin pantalla donde localhost no sea accesible, usa scripts/shoot.mjs http://localhost:3000 (o contra un despliegue) para capturas headless, e indícalo si ni siquiera eso está disponible.

NUNCA ejecutes npm run build mientras npm run dev está en ejecución. Ambos escriben en .next; la compilación sobrescribe los fragmentos del servidor de desarrollo en mitad del vuelo y la página falla con Error: Cannot find module './31.js' (o similar). Esto nos ha pasado y parece un error de código pero no lo es. Mientras un servidor de desarrollo está activo:

• verifica tipos con npx tsc --noEmit (no toca .next);
• para hacer una compilación real npm run build, detén dev primero;
• si el servidor de desarrollo ya está corrupto: pkill -f "next dev", rm -rf .next, luego reinicia npm run dev.

Cuando edites un servidor de desarrollo en ejecución, prefiere tsc --noEmit + un curl localhost:3000 | grep para tu contenido para confirmar que compiló, en lugar de compilar.

Paso 6 — Empaqueta y entrega

Elimina node_modules, .next, out, comprime el proyecto y compártelo con mcp__cowork__present_files. Proporciona los comandos de ejecución (npm install && npm run dev) y un resumen de un párrafo sobre cómo se aplicó el estilo de la referencia.

Paso 7 — Publica y audita (opcional)

Si el usuario desea una URL compartible o una puntuación de calidad:

• Auditar: scripts/audit.sh http://localhost:3000 (servidor de desarrollo en ejecución) imprime las puntuaciones Lighthouse de rendimiento/accesibilidad/mejores prácticas/SEO. Apunta a 90+; accesibilidad y SEO son los triunfos baratos que debes corregir antes de enviar.
• Desplegar: compila primero (scripts/verify.sh <dir> produce out/), luego scripts/deploy.sh out para una URL de vista previa. Desplegar es orientado al exterior — confirma con el usuario antes de scripts/deploy.sh out --prod, y no despliegues un out/ obsoleto. Son archivos estáticos, por lo que Vercel/Netlify/cualquier servidor funciona.
• Vuelve a ejecutar audit.sh <url-de-despliegue> contra la URL en vivo para obtener una puntuación en red real.

Barreras de seguridad

• Originalidad: nunca copies el texto de la referencia, ni incrustes sus logotipos o activos de imagen con marca registrada — usa texturas/formas generadas con CSS en su lugar. Los nombres de empresas en un contexto de comparación/palabra están bien.
• Dominios sensibles: si el producto es del ámbito de la salud, finanzas, legal o similar, mantén un tono responsable y preciso, etiqueta los datos demo como ilustrativos, evita garantías e incluye avisos apropiados (ej. una línea de recursos de crisis para sitios de salud mental). Mantén el lenguaje de carga/marketing no alarmante.
• Datos ilustrativos: indica que cualquier nombre, número, cita o disponibilidad mostrados son contenido demo placeholder — pero mantenlo pequeño y discreto (una línea corta), nunca un bloque de descargo gigante, y nunca metido en el pie de página como si fuera el pie de página del sitio. Si el usuario quiere el pie de página real del producto, replica eso (ver abajo) y coloca la nota ilustrativa en otro lugar o elimínala si el usuario la anula explícitamente — entonces informa que nada marca los datos demo como ilustrativos.
• Pie de página: prefiere el pie de página real del producto objetivo — obténlo y reutiliza su eslogan, enlaces y derechos de autor textualmente — en lugar de inventar uno o dejar una nota de compilación allí.
• Movimiento: cada animación debe degradarse correctamente bajo movimiento reducido.

Errores aprendidos (NO repetir)

Difíciles de conseguir en ejecuciones reales. Detalle técnico completo en references/build-guide.md.

1. Recolorear ≠ reestilizar. No mantengas el esqueleto de secciones del sitio del usuario y simplemente cambies los colores — aún se ve como su original. Toma prestada la estructura y los componentes característicos de la referencia. (Ver la regla de oro.)
2. display:flex en un elemento de lista de texto / párrafo que contiene marcado en línea (<b>, <span>) divide cada fragmento en línea en su propia columna flex — el texto se rompe en columnas rotas. Usa un ::before posicionado para viñetas; mantén los contenedores de texto como display:block. Solo flexiona el contenedor, nunca la línea de prosa en sí.
3. Nunca npm run build mientras npm run dev está en ejecución (corrompe .next). Usa npx tsc --noEmit para verificar mientras dev está activo. (Ver Paso 5.)
4. Las escrituras no latinas necesitan su propia fuente web. Devanagari/CJK/Árabe no se renderizarán en Inter/JetBrains Mono; carga la next/font coincidente con los subsets adecuados (ej. Noto_Sans_Devanagari, subsets:["devanagari"]) y aplica una clase .hi{font-family:var(--f-deva)}. No confíes en las fuentes de respaldo del sistema operativo.
5. Reutiliza el pie de página real del producto, no inventes uno ni coloques una nota de compilación allí (ver barrera de seguridad sobre el pie de página).

Nivel de calidad

Apunta a algo que pueda pasar por una página de lanzamiento real: escala tipográfica segura, paleta contenida, un elemento visual característico de la referencia y movimiento que revele el contenido a medida que se desplaza, en lugar de decorarlo. No reutilices el mismo layout para diferentes referencias — el objetivo es que cada resultado se parezca al sitio del que tomó prestado.