Constructor de Landing Page Premium Basado en Referencias
Estilo de salida coreano: para texto dirigido al usuario coreano (preguntas HITL, informes de estado, respuestas), aplicar
$CLAUDE_PLUGIN_ROOT/docs/development/korean-style.md— §"Reglas de redacción de preguntas HITL" y §"Principios de respuestas e informes". Los archivos coreanos escritos en disco se revisan automáticamente mediante el hook PostToolUse de estilo coreano.
Produce una landing page autónoma de grado de producción combinando tres prácticas que separan el trabajo profesional de la salida genérica de IA:
- Referencias visuales primero — se recopilan referencias reales de animación/diseño desde Pinterest (y galerías similares) con un navegador real antes de cualquier decisión de diseño, luego se destilan en un brief de diseño anclado a referencias (nunca copiado).
- Video AI como material de diseño — el fondo hero es un video de bucle sin costura generado con Google Veo 3.1, dirigido artísticamente según los tokens de diseño, post-procesado para la web y reproducido mediante un script de bucle infinito que oculta la costura.
- Convergencia, no un solo intento — la página terminada pasa por el bucle adversarial
screen-quality-loopantes de reportarse como finalizada.
Principios fundamentales:
- Anclado en referencias, nunca copiado — las referencias contribuyen patrones (arquetipo de diseño, vocabulario de movimiento, dirección de paleta); no se reproduce ningún diseño específico y ningún activo de terceros se envía en el entregable.
- DESIGN.md es la ley — cuando
docs/design-system/DESIGN.mdexiste, sus tokens yaesthetic_rulesanulan los tonos predeterminados derivados en el Paso 0. - Degradación elegante en cada dependencia externa — sin acceso a Pinterest, sin herramientas Veo, sin ffmpeg y sin navegador son todos sobrevivibles; cada fallback se indica en el informe final, nunca se sustituye silenciosamente.
- Disciplina de costos — el presupuesto de generación predeterminado es exactamente 1 imagen fija + 1 clip Veo (8 s,
veo-3.1-lite); cualquier cosa adicional requiere una solicitud explícita del usuario (la regeneración acotada de Seam-QA enreferences/veo-loop-video.md§6 es parte del presupuesto predeterminado, no un exceso). - La accesibilidad de movimiento no es negociable — el fallback
prefers-reduced-motion, un control de pausa visible (WCAG 2.2.2) y una estrategia LCP con póster primero son obligatorios, no un pulido.
Ubicación de salida: landing/{slug}/ (entregable) + landing/{slug}/.work/ (clips sin procesar, imágenes fijas, evidencia de QA — nunca referenciados por la página).
🌐 REGLA DE IDIOMA: Antes de ejecutar este skill, lea el
CLAUDE.mddel proyecto y verifique la sección## Languagepara detectar el idioma del proyecto. Si el idioma del proyecto NO es coreano (ko), traduzca TODO el texto de la página dirigido al usuario y la salida del informe al idioma del proyecto. Los identificadores técnicos (rutas de archivo, variables CSS, nombres de clase) permanecen sin traducir. Si no existeCLAUDE.mdo una sección## Language, usar coreano por defecto.
Procedimiento de Ejecución
Paso 0: Ingreso y Tono de Diseño
A. Análisis de Argumentos
| Argumento | Acción |
|---|---|
Brief de texto (ej. SaaS de contabilidad AI para freelancers) | Usar como brief del producto/marca |
| URL | WebFetch la página — extraer producto, audiencia, señales de marca existentes |
Ruta docs/planner/{NNN}-*/ | Leer los entregables del planner (personas, KPI, diseños de pantalla) como el brief |
--refs=<dir> | Usar las imágenes de referencia propias del usuario desde <dir>; saltar la captura del Paso 1 (el análisis aún se ejecuta) |
--slug=<nombre> | Nombre del directorio del entregable; de lo contrario, derivar kebab-case de la marca/característica |
--no-video | Saltar Veo por completo — el hero usa el fallback CSS animado (Ruta C) |
--auto | Cero HITL — proceder con las suposiciones indicadas (para uso en pipeline) |
| (vacío) | Escanear docs/planner/ en busca del paquete más reciente; si no hay, pedir un brief de una línea |
B. Verificación de Ambigüedad (Pensar Antes de Codificar — máximo 1 HITL)
Si el brief no define (1) la audiencia objetivo y (2) la única acción de conversión principal (registro / compra / contacto / descarga), preguntar una vez con opciones de interpretación. Bajo --auto, elegir la interpretación más probable y registrarla bajo "Suposiciones" en el informe final. Nunca hacer más de una pregunta de ingreso.
C. Carga del SSoT de Diseño
docs/design-system/DESIGN.mdexiste → cargar tokens +aesthetic_rules; la tabla de tonos a continuación solo llena los vacíos.- De lo contrario → derivar el tono de diseño del brief:
| Señal de marca/producto | Tono de diseño | Dirección de movimiento del hero |
|---|---|---|
| SaaS / herramientas dev / producto AI | Gradiente Oscuro Tech | aurora lenta / deriva de gradiente, campo de partículas disperso |
| Lujo / bienes premium | Lujo Editorial | deriva de material macro (seda, metal líquido), profundidad de campo reducida |
| App de consumo / estilo de vida / bienestar | Ambiente Suave | escena de enfoque suave, fugas de luz a la deriva, paralaje suave |
| Finanzas / B2B / empresa | Minimalista Confiado | geometría abstracta, movimiento de líneas y malla lento, paleta restringida |
| Estudio creativo / evento / portafolio | Cinético Audaz | formas de alto contraste, campos de color que barren |
- Cargar las dos guías de UX — rigen todas las decisiones estéticas y de movimiento en los Pasos 2–4:
$CLAUDE_PLUGIN_ROOT/docs/ux/vibe-coding-design-guide.md(§4 técnicas de prompting, §4.1 anti-estética AI, §4.2 prompts anclados en referencias)$CLAUDE_PLUGIN_ROOT/docs/ux/vibe-coding-animation-guide.md(§15 accesibilidad de movimiento, §18 fondos de video generados por AI)
D. Protección del Árbol de Trabajo Principal y Sincronización de dev
Las landing pages son entregables de la fase de planificación — ejecutar en el árbol de trabajo principal en dev, como los otros skills de sincronización de dev:
PLUGIN_ROOT="${CLAUDE_PLUGIN_ROOT:-$(find ~/.claude/plugins/cache -maxdepth 3 -type d -path '*/astra-methodology/*' 2>/dev/null | sort -V | tail -1)}"
if [ -z "$PLUGIN_ROOT" ] || [ ! -f "$PLUGIN_ROOT/scripts/worktree-helpers.sh" ]; then
echo "ERROR: CLAUDE_PLUGIN_ROOT no encontrado. Verifique la ruta de caché del plugin." >&2; exit 1
fi
source "$PLUGIN_ROOT/scripts/worktree-helpers.sh"
astra_ensure_main_worktree || exit 1
Luego sincronizar dev exactamente como lo hace /catalog-generator Paso 0.G (verificar rama → stash si está sucio → git fetch origin dev && git checkout dev && git pull origin dev → pop stash; fallback a main/master cuando dev esté ausente).
Paso 1: Recopilación de Referencias (Pinterest)
Recopilar 6–12 referencias de animación/diseño antes de diseñar nada. Procedimiento completo, recetas de consulta, manejo de ventanas emergentes y la plantilla del tablero: leer $CLAUDE_PLUGIN_ROOT/skills/landing-page/references/reference-collection.md ANTES de comenzar este paso.
A. Resolver el Backend del Navegador
Según el orden del plugin (ego predeterminado → fallback Chrome MCP; SSoT: $CLAUDE_PLUGIN_ROOT/docs/development/browser-backend-policy.md):
command -v ego-browser >/dev/null 2>&1 && echo ego || echo ""
Salida vacía → chrome-mcp cuando las herramientas mcp__chrome-devtools__* estén presentes. Ninguno disponible → fallback de captura: WebSearch para descripciones actuales de showcases de landing pages/animación (galerías de premios, showcases de movimiento) y construir un tablero de referencias solo de texto; indicar "tablero de referencias: derivado de búsqueda (sin navegador)" en el informe final.
B. Búsqueda y Captura
- Construir 4–5 consultas de búsqueda en Pinterest desde
{tono} + {industria} + medio(recetas en el archivo de referencias). - Por consulta: abrir
https://www.pinterest.com/search/pins/?q={query}, cerrar modales superpuestos,window.scrollTo(0, 0)(protección de marco en blanco de ego), capturar la cuadrícula de resultados, luego abrir los 1–2 pins principales y capturar sus vistas de detalle. - Modo ego: un heredoc = una ronda, y una captura requiere tres o más rondas (navegar → sonda de preparación → barrer+capturar; nunca comprimir en una, o la captura sale en blanco — ver el archivo de referencias); Espacio de Tarea
astra landing {slug};captureScreenshotcon rutas absolutas; cerrar concompleteTaskSpace('astra landing {slug}', { keep: false })cuando termine. - Guardar capturas en
landing/{slug}/design/references/ref-{NN}.png. Pinterest inaccesible (persiste muro de inicio de sesión / bloqueo de red) → reintentar las mismas consultas en las galerías similares listadas en el archivo de referencias; aún nada → fallback de captura del Paso 1.A.
C. Análisis de Visión → Tablero de Referencias
Para cada captura, extraer un registro estructurado (prompt de análisis en el archivo de referencias): arquetipo de diseño, tratamiento del hero, vocabulario de movimiento (qué se mueve, qué tan lento, qué easing), dirección de paleta, carácter tipográfico, densidad, un detalle distintivo que valga la pena adaptar. Usar mcp__fect-mcp__vision_analyze cuando esté disponible; de lo contrario, Read cada PNG directamente (lectura multimodal).
Escribir landing/{slug}/design/reference-board.md — registros por imagen + una sección de síntesis ("en qué coinciden estas referencias"). Verificar con [ -f ] antes de afirmar que el tablero existe.
Protección de originalidad: el tablero registra patrones, nunca instrucciones para reproducir un pin específico. Las capturas de referencia permanecen en design/references/ como material de trabajo interno — nunca se enlazan desde index.html y nunca se envían como activos de la página.
Paso 2: Síntesis de la Dirección de Diseño
Destilar el tablero de referencias + tono de diseño + DESIGN.md en un brief de diseño comprometido en landing/{slug}/design/direction.md, que contenga exactamente estas decisiones:
- Arquetipo de diseño — ej. hero de video a pantalla completa + bandas de características alternas + CTA de cierre.
- Vocabulario de movimiento — las reglas de movimiento de toda la página (duraciones, easings, estilo de revelación por desplazamiento) extraídas del tablero de referencias, mapeadas a las técnicas de
vibe-coding-animation-guide.md. - Plan de medios del hero — decisión de Ruta A/B/C (tabla del Paso 3), más el sujeto, estado de ánimo y comportamiento de cámara del video.
- Paleta + tipografía — de los tokens de DESIGN.md cuando esté presente; de lo contrario, derivada del tono + referencias (valores OKLCH, una familia de visualización + una de cuerpo).
- Elementos distintivos anti-AI — al menos 2 elecciones distintivas concretas (según design-guide §4.1 / DESIGN.md
aesthetic_rules): ej. cuadrícula asimétrica, combinación de serifa editorial, textura de grano/ruido, indicador de desplazamiento personalizado, números sobredimensionados. La salida genérica de hero centrado + tres tarjetas + gradiente púrpura es un defecto, no una línea base.
HITL (saltar bajo --auto): presentar las 5 decisiones como un resumen compacto y hacer una única pregunta de confirmación/ajuste. Esta es la última puerta de decisión — todo lo demás se ejecuta sin supervisión.
Paso 3: Producción de Video Hero en Bucle (Veo 3.1)
Leer $CLAUDE_PLUGIN_ROOT/skills/landing-page/references/veo-loop-video.md ANTES de este paso — contiene las recetas de prompts, las plantillas de llamadas a herramientas y todos los comandos de ffmpeg.
A. Decisión de Ruta
| Condición | Ruta |
|---|---|
mcp__fect-mcp__veo_* presente y mcp__fect-image__nanobanana_text2img presente | A — Bucle de bookend (predeterminada) |
mcp__fect-mcp__veo_* presente, fect-image ausente | B — text2video + bucle de crossfade |
Herramientas Veo ausentes, o --no-video | C — Hero CSS animado (sin video; plantilla en references/video-integration.md) |
La presencia de herramientas se determina a partir de las herramientas disponibles en la sesión (el servidor fect-mcp es a nivel de usuario y no está incluido — la ausencia es normal, no un error). Registrar la ruta elegida; el informe final debe indicarla y, para B/C, el motivo.
B. Ruta A — Bucle de Bookend (primer cuadro == último cuadro)
El truco del bucle sin costura: generar una imagen fija dirigida artísticamente, luego hacer que Veo la anime desde ese cuadro de vuelta a ese cuadro — veo_img2video con lastImagePath establecido en el mismo archivo que sourceImagePath. Los primeros y últimos cuadros del clip son idénticos en píxeles, por lo que se repite sin una costura visible, y la imagen fila también funciona como el póster LCP.
- Imagen fija:
mcp__fect-image__nanobanana_text2img→landing/{slug}/.work/hero-frame.png— 16:9, paleta coincidente con tokens, espacio negativo tranquilo donde se ubicará el titular, sin texto, sin logotipos, sin rostros (plantilla de prompt por tono en el archivo de referencias). - Clip:
mcp__fect-mcp__veo_img2video—sourceImagePath=lastImagePath=hero-frame.png,durationSeconds: 8,resolution: "1080p"(1080p requiere 8 s),aspectRatio: "16:9", modelo predeterminado (veo-3.1-lite— subir afast/completo solo si la salida lite falla en Seam QA dos veces). Prompt = movimiento ambiental cíclico que regrese visiblemente a su inicio (recetas por tono en el archivo de referencias; sin cortes, sin nuevos sujetos, sin texto). - Verificar (nunca afirmar sin ello):
[ -f ]el mp4 +ffprobeduración ≥ 7 s. Si falta/es corto → regenerar una vez; aún falla → Ruta B; Veo da error por completo → Ruta C. - Seam QA: extraer primer + último cuadro, comparar con
mcp__fect-mcp__vision_compare(oReadambos). Un salto visible → aplicar el bucle de crossfade ffmpeg del archivo de referencias encima.
C. Ruta B — text2video + Bucle de Crossfade
mcp__fect-mcp__veo_text2video con la receta de prompt amigable para bucles, luego hacerlo sin costura con el autocrossfade de ffmpeg (mezclar el segundo final en el segundo inicial; comando en el archivo de referencias). Póster = primer cuadro extraído.
D. Post-Producción (todas las rutas de video)
Con ffmpeg (command -v ffmpeg): eliminar audio (-an — el video de fondo siempre está silenciado; la pista de audio nativa de Veo es peso muerto), codificar la escalera hero-desktop.mp4 (1920 w, H.264 CRF 24, +faststart) + hero-mobile.mp4 (720 w, CRF 26), y producir hero-poster.jpg (Ruta A: convertido de hero-frame.png; Ruta B: primer cuadro). Las salidas se colocan en landing/{slug}/assets/video/.
Sin ffmpeg → usar el mp4 de Veo sin procesar para ambas variantes; el reproductor JS de crossfade (Paso 4) oculta cualquier costura residual. Indicar la compresión faltante en el informe final — no presentar la página como optimizada en tamaño.
Puerta de presupuesto: hero-desktop.mp4 ≤ 4 MB, hero-mobile.mp4 ≤ 1.5 MB, póster ≤ 200 KB (verificar con stat -f%z / du -k). Por encima del presupuesto → aumentar CRF y recodificar antes de continuar.
Una variante vertical 9:16 (segunda generación de Veo) se genera solo bajo solicitud explícita del usuario — la estrategia móvil predeterminada es la reducción a 720 w + carga primero del póster.
Paso 4: Implementación de la Página
Leer $CLAUDE_PLUGIN_ROOT/skills/landing-page/references/video-integration.md ANTES de este paso — contiene el marcado del hero, el reproductor completo de bucle infinito loop-video.js, el C...
... [truncado para traducción]