oil-oil/citycraft

Constructor de Landing Pages

Filosofía

Esta skill produce landing pages que son visualmente audaces — no el típico contenedor anidado, cuadrícula de tarjetas, plantilla web predecible. Cada salida debe sentirse como un artefacto de diseño deliberado:

• Diseño audaz — Divisores con clip-path en lugar de líneas horizontales. Tipografía que se sale de la pantalla. Elementos que rompen su cuadrícula. Titulares a pantalla completa.
• SVG como núcleo del diseño — No como adornos decorativos. Las rutas SVG se animan al hacer scroll, los iconos tienen personalidad, las texturas de fondo provienen de ruido <feTurbulence>.
• Profundidad y capas — GSAP ScrollTrigger crea profundidad espacial genuina: secciones que se superponen y cubren la anterior, paneles fijos mientras el contenido se desliza sobre ellos, parallax en capas z separadas.
• Textura en fondos — Cada sección tiene textura. Nunca un fondo sólido y plano.
• Sorpresa en la navegación — El nav nunca es una barra horizontal estándar.

---

Activos Empaquetados (USA ESTOS — no reinventes)

Esta skill viene con activos preconstruidos. Léelos y úsalos directamente:

Archivo	Qué contiene	Cuándo usarlo
assets/style-preview-template.html	57 tarjetas de vista previa de estilo	Paso 2: sed rellena __PRODUCT_NAME__ + __PRODUCT_HEADLINE__, guarda como style-preview.html, abre
assets/options-preview-template.html	Demos interactivas: estilos de nav, variantes de color, estilos de transición, variantes de héroe/características/testimonios	Paso 3: sed rellena tokens de color de ciudad + nombre del producto, guarda como options-preview.html, abre
assets/textures.css	6 clases CSS de textura (.texture-kyoto, .texture-paris, .texture-tokyo, etc.)	Copia la clase que coincida en style.css
assets/gsap-snippets.js	6 funciones de animación GSAP (entrada borrosa, revelación de línea, parallax, pasos fijos, menú explosivo, píldora magnética)	Copia las funciones relevantes en main.js
assets/clip-paths.css	8 clases de divisor clip-path (.clip-diagonal-br, .clip-parallelogram, .clip-arc-bottom, etc.)	Usa al menos 2 en style.css para divisores de sección
assets/sections/hero-variants.html	3 plantillas de sección Héroe (Pantalla completa dividida / Tensión de pantalla dividida / Caída mínima)	Paso 4: elige la variante que coincida con la preferencia tipográfica del usuario, copia y adapta
assets/sections/features-variants.html	6 plantillas de sección Características (Números grandes / Pantalla alterna / Línea de tiempo / Cuadrícula Bento / Desplazamiento horizontal / Preguntas desplegables)	Paso 4: elige según el tipo de contenido (estadísticas → número grande, cómo funciona → línea de tiempo)
assets/sections/testimonial-variants.html	6 plantillas de Testimonios (Tarjetas compactas / Cita de una columna / Mosaico / Barra de desplazamiento horizontal / Burbujas de diálogo / Muro de avatares)	Paso 4: elige según el volumen de testimonios y la preferencia de estilo visual
assets/sections/conversion-variants.html	Tabla de precios, FAQ, muro de marcas, CTA potente	Paso 4: copia la sección relevante, todas usan propiedades personalizadas CSS
references/product-demo-hero.md	Principios de héroe de demostración de producto + guía de diseño de escenas	Léelo cuando el usuario quiera mostrar el flujo de trabajo del producto en el héroe (ver Paso 3/4)

La garantía de calidad de esta skill proviene del uso de estos activos. Codifican decisiones de diseño específicas que hacen que los resultados sean distintivos. No describas qué hacer — copia el código y adáptalo.

---

El Flujo de Trabajo

Paso 1: Entender el Producto

Reutiliza el producto y estilo que el usuario ya ha proporcionado; solo pregunta si falta información del producto:

"Cuéntame sobre tu landing page — nombre del producto/servicio y una frase de descripción."

Si el usuario ya ha dado la descripción del producto, ha seleccionado una ciudad o ha delegado la decisión al agente, pasa directamente al paso correspondiente.

Pasos 2–3: Vista Previa Opcional de Estilo y Diseño

Si el usuario ya tiene una selección, reutilízala directamente; si el agente debe elegir, lee las entradas de ciudad relevantes, explica el motivo y continúa. Si es necesario comparar, genera una vista previa local según el Flujo de Trabajo de Vista Previa. Si no hay capacidad de vista previa disponible, ofrece algunas opciones en el diálogo, sin asumir que abrir una página implica que el usuario la ha seleccionado.

Paso 4: Generar la Landing Page

Salida en {nombre-producto}-landing/:

{nombre-producto}-landing/
├── index.html
├── style.css
├── main.js
└── assets/
    └── icons.svg

4a — Ensamblaje en Bash (haz esto primero, antes de escribir cualquier archivo)

El objetivo es evitar generar el código de los activos empaquetados como tokens del modelo. En su lugar, usa Bash para copiar y canalizar los activos listos para usar en los archivos de salida. Solo el contenido específico del producto (copy, tokens, anulaciones) es escrito por el modelo.

Paso 1 — Crear directorios

_SKILL_DIR="<Directorio absoluto del Skill actual>"
_OUT="./{nombre-producto}-landing"
mkdir -p "$_OUT/assets"

Paso 2 — Ensamblar variantes de sección en un archivo de staging

Planifica qué variantes usar (ver tabla abajo), luego canaliza cada una a un archivo de staging:

# Reemplaza B / C / B / PRICING con las elecciones reales del usuario
python3 "$_SKILL_DIR/assets/scripts/extract_variant.py" \
  "$_SKILL_DIR/assets/sections/hero-variants.html" B > "$_OUT/_sections.html"
python3 "$_SKILL_DIR/assets/scripts/extract_variant.py" \
  "$_SKILL_DIR/assets/sections/features-variants.html" C >> "$_OUT/_sections.html"
python3 "$_SKILL_DIR/assets/scripts/extract_variant.py" \
  "$_SKILL_DIR/assets/sections/testimonial-variants.html" B >> "$_OUT/_sections.html"
python3 "$_SKILL_DIR/assets/scripts/extract_variant.py" \
  "$_SKILL_DIR/assets/sections/conversion-variants.html" PRICING >> "$_OUT/_sections.html"
python3 "$_SKILL_DIR/assets/scripts/extract_variant.py" \
  "$_SKILL_DIR/assets/sections/conversion-variants.html" CTA >> "$_OUT/_sections.html"

Para testimonios usa: A, B, C, D, E, F Para secciones de conversión usa: PRICING, COMPARE_PRICING, BRAND_WALL, CTA, FAQ_A, FAQ_B

Paso 3 — Copiar utilidades CSS empaquetadas en la base de style.css

# Textura: usa el flag --texture (nunca leas city-styles.md completo)
python3 "$_SKILL_DIR/assets/scripts/get_city_tokens.py" "NOMBRE_CIUDAD" --texture > "$_OUT/_texture.css"
# Clip-paths: copia todas las clases, el modelo elige cuáles aplicar mediante nombres de clase
cat "$_SKILL_DIR/assets/clip-paths.css" >> "$_OUT/_texture.css"

Paso 4 — Copiar fragmentos GSAP en la base de main.js

cat "$_SKILL_DIR/assets/gsap-snippets.js" > "$_OUT/_gsap-base.js"

Ahora lee los tres archivos de staging (_sections.html, _texture.css, _gsap-base.js) para entender qué está disponible, luego escribe los archivos de salida finales.

4b — Referencia de Variantes de Sección

Secuencias de página comunes:

• Herramienta SaaS: Héroe D → Características C → Características A → Testimonios A → Precios → FAQ A → CTA
• Portfolio de agencia: Héroe A → Características B → Testimonios C → CTA
• Herramienta para desarrolladores: Héroe B → Características C → Características A → Testimonios A → Precios → FAQ B → CTA
• Producto de lujo: Héroe C → Características B → Testimonios B → CTA
• App B2C: Héroe E → Características E → Testimonios F → CTA

Si el usuario necesita...	Usa esta plantilla	Variante
Héroe — declaración masiva y audaz	Pantalla completa dividida	A
Héroe — visual del producto + titular	Tensión de pantalla dividida	B
Héroe — elegante, centrado en la historia	Caída mínima	C
Héroe — el producto tiene un flujo de trabajo que mostrar	Demostración de producto	D (también lee references/product-demo-hero.md)
Héroe — liderada por tipografía, alto impacto	Explosión de texto	E
Héroe — narración editorial	Desgarre de revista	F
Héroe — lanzamiento de producto lúdico	Tarjetas emergentes	G
Características — enfoque en datos/métricas	Números grandes	A
Características — capturas de pantalla del producto	Pantalla alterna	B
Cómo funciona — paso a paso	Línea de tiempo	C
Características — bloques de historia modulares	Cuadrícula Bento	D
Características — cinta de capacidades navegable	Cinta de desplazamiento horizontal	E
Características — manejo de objeciones	Preguntas desplegables	F
Tabla de precios	Tabla de precios	PRICING
Comparación de precios con conmutador	Tabla de precios comparativa	COMPARE_PRICING
Testimonios — cuadrícula compacta	Cuadrícula de tarjetas compactas	A
Testimonios — estilo revista	Muro de citas de una columna	B
Testimonios — diseño mosaico	Mosaico	C
Testimonios — desplazamiento horizontal	Barra de desplazamiento horizontal	D
Testimonios — burbujas de conversación	Burbujas de diálogo	E
Testimonios — muro de avatares	Muro de avatares de video	F
Logotipos de marcas de confianza	Muro de marcas	BRAND_WALL
CTA final	Área CTA potente	CTA
FAQ — diseño editorial	Diseño editorial	FAQ_A
FAQ — cuadrícula de tarjetas	Enfoque de ancho completo	FAQ_B

4c — Escribir los Archivos de Salida

index.html — Escríbelo con la herramienta Write. Sin bloque de markdown, directamente al archivo.

• Estructura del documento: <html>, <head> (Google Fonts, CDN de GSAP, enlace a style.css + main.js), <body>
• HTML del nav que coincida con el estilo de navegación seleccionado
• Pega los bloques <style> y <section> HTML de _sections.html en orden de página
• Reemplaza todo el texto de marcador de posición con el copy real del producto — ajusta el tono de voz de la estética de la ciudad
• Sin Lorem Ipsum, sin texto de marcador de posición
• Rompe la uniformidad de la plantilla: varía el peso visual entre los elementos de cada sección. La plantilla muestra un patrón repetitivo — haz que un elemento sea el punto focal (fondo acentuado, tarjeta más grande, insignia destacada, diseño interno diferente) y deja que los otros pasen a un segundo plano. Ninguna sección debe parecer una cuadrícula de clones.

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>

style.css — Escríbelo con la herramienta Write. Estructura:

1. Bloque :root — sistema completo de tokens de diseño: colores de los tokens $CITY_*, fuentes elegidas, escala de espaciado, radios. Esta es la única parte que el modelo escribe desde cero.
2. Pega la textura + CSS de clip-path de _texture.css
3. CSS del nav que coincida con el estilo de navegación seleccionado (de references/nav-catalog.md)
4. Anulaciones de diseño y tipografía — solo lo que difiera de los valores predeterminados de la sección

clamp() para TODOS los tamaños de fuente de titulares:

• Título principal del héroe: clamp(2.8rem, 7vw, 7rem) — incluso los audaces no superan 7rem
• Título de sección: clamp(2rem, 4vw, 4rem)
• Números grandes/decorativos: clamp(4rem, 10vw, 9rem)
• Subtítulos/texto explicativo: clamp(1rem, 1.4vw, 1.2rem)

NO agregues comentarios a style.css — consumen tokens y no aportan valor al archivo de salida.

main.js — Escríbelo con la herramienta Write. Estructura:

1. gsap.registerPlugin(ScrollTrigger)
2. Pega las funciones relevantes de _gsap-base.js — mínimo requerido:
   • initHeroEntrance() — entrada escalonada de elementos del héroe
   • initParallax() — al menos 2 capas a diferentes velocidades
   • Revelaciones de títulos de sección al entrar en el viewport
   • initStickySteps() O initBlastMenu() O initMagneticPill() — que coincida con nav/diseño
3. Secuencia de llamadas al final; ScrollTrigger.refresh() después de que se carguen las fuentes

NO agregues comentarios a main.js.

assets/icons.svg — Sprite SVG con elementos <symbol>. Como mínimo: marca del logotipo, conmutador de navegación, flecha, marca de verificación, 2–3 iconos de características relevantes para el producto. El estilo del icono debe coincidir con el grosor de trazo y la geometría de la estética de la ciudad.

Después de escribir todos los archivos, elimina los archivos de staging:

rm -f "$_OUT/_sections.html" "$_OUT/_texture.css" "$_OUT/_gsap-base.js"

---

Leyes de Diseño (Nunca las Rompas)

1. Sin fondos #ffffff. Ni en secciones, ni en tarjetas. Neutros cálidos: #f5ede0. Fríos: #edf0ee. Oscuros: #08060f. Las tarjetas obtienen un ligero matiz, nunca blanco puro.
2. Sin #6366f1. El color proviene de la paleta de estilos de la ciudad.
3. Decide el tipo de transición de forma independiente para cada límite de sección. Cada par de secciones adyacentes tiene su propia relación visual — no reutilices la misma clase de clip-path en todas partes. El usuario elige una dirección de transición (geométrica nítida / orgánica suave / cubierta-fusión / línea mínima / AI automática) en la vista previa de opciones. Usa esa dirección para restringir qué clases eliges: GEOMETRIC → diagonales, chaflanes, escalones; ORGANIC → curvas, festones, arcos; BLEND → superposiciones de cubierta y disoluciones de degradado; MINIMAL → reglas de línea fina. Si __AI_CHOOSE__, primero escanea la entrada de la ciudad seleccionada en references/city-styles.md en busca de lenguaje de divisor/transición. Luego aplica lógica por límite: considera qué son las dos secciones (héroe → características, características → precios, etc.), su energía relativa y el ritmo general de la página. Clases disponibles en assets/clip-paths.css: diagonales (clip-diagonal-*, clip-parallelogram), curvas (clip-round-bottom, clip-scallop, clip-arc-bottom), disolución de degradado (section-dissolve), regla plana (section-rule).
4. Sin iconos genéricos. Coincide con el grosor de trazo y la geometría del estilo de la ciudad.
5. Mínimo dos tipografías. De exhibición/serifa para titulares + sans limpia para cuerpo de texto. De references/city-styles.md. Las fuentes decorativas/de acento script (cuando un estilo de ciudad mencione una) van en marcas de agua, citas destacadas o elementos ornamentales — nunca en botones, nav o texto del cuerpo.
6. El nav debe sorprender. Usa el nav elegido de references/nav-catalog.md con su elemento sorpresa completo implementado.
7. Usa los activos empaquetados. La textura, los fragmentos GSAP y los clip-paths deben provenir de los archivos de activos del skill — no reimplementados desde cero.
8. Corrección .line-wrap CJK. Siempre que la página tenga texto en chino o japonés y use .line-wrap { overflow: hidden } para animaciones de revelación de línea, añade padding-top: 0.15em; margin-top: -0.15em; para evitar que los ascendentes CJK se recorten en la parte superior.
9. Sin cuadrículas de clones. Cuando una sección contenga múltiples elementos repetitivos (filas de características, tarjetas de precios, elementos de FAQ, testimonios), no deben compartir todos el mismo tratamiento visual. Un elemento debe ser el punto focal — más grande, acentuado o con un diseño distinto — mientras que los otros forman el elenco de apoyo. Una sección debe sentirse como un póster con jerarquía visual, no como una hoja de cálculo de filas idénticas. Esta es la causa principal de que las páginas parezcan "plantilladas" en lugar de diseñadas.

---

Archivos de Referencia

• references/city-styles.md — Parámetros de diseño exactos (fuentes, colores, texturas, movimiento, iconos) para cada estética de ciudad
• references/nav-catalog.md — 4 estilos de nav con notas de implementación completas y código GSAP
• references/imagery-derivation.md — Cómo traducir cualquier descripción no urbana (escena, época, material, emoción) en un sistema concreto de tokens de diseño. Léelo siempre que el usuario describa algo que no sea una de las 57 cartas de ciudad.
• references/product-demo-hero.md — Cuándo y cómo construir una demostración del flujo de trabajo del producto basada en tiempo en el Héroe (Variante D). Incluye guía de diseño de escenas, estructura de 3 actos, patrones de callback onEnter() y tabla de mapeo tipo de producto → escena. Léelo siempre que el usuario quiera mostrar el proceso de su producto en el héroe.

Hechos y Degradación

Las reseñas, logotipos de clientes, cifras y precios en las plantillas son solo ejemplos estructurales; si no hay evidencia, elimínalos o reemplázalos con descripciones reales del producto, no inventes respaldos. La implementación debe soportar operación con teclado, prefers-reduced-motion y contenido legible estático cuando fallen las cargas de scripts/CDN. Las notas de aceptación visual deben verificar viewport y estado reales; no afirmes que lo visual ha sido aprobado sin haber renderizado.