feat: motor de ESTETICA de landings claude-design (skill v2 IDENTICA + nuevo agente *-landing-estetica que crea la estetica/HTML autocontenido, NO el copy) en los plugins que hacen landings + cableado en los agentes de landing

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: zenithmetodo

.claude-plugin/marketplace.json

@@ -9,7 +9,7 @@
       "name": "zenith-crea-ofertas",
       "source": ".",
       "description": "Sistema TOP 1% para crear OFERTAS COMPLETAS de alto valor percibido (Método Zenith). Orquestador (skill crea-ofertas-master) + 53 sub-agentes que se lanzan con la tool Agent: pre-fase spec/review/plan, Bloque Avatar & Nicho opcional (nicho + competición de subavatares con nombres normales + investigación obligatoria + 5 porqués + compuerta de validación), avatar deep, research, ángulos, competidor, One Belief, mecanismo (problema/solución/nombre chicle/objeto brillante/mito de origen), promesa, garantía, módulos/clases, bonus, valor percibido (Bencivenga) y auditoría. Lee OBLIGATORIamente la Biblia del Copy + la Biblia del Mecanismo + la memoria/tono del usuario. 20 frameworks DR. Entrega por carpetas en HTML estético + PDF con branding Zenith. Joseph Moreno.",
-      "version": "2.4.6"
+      "version": "2.4.7"
     }
   ]
 }

.claude-plugin/plugin.json

@@ -1,7 +1,7 @@
 {
   "name": "zenith-crea-ofertas",
   "description": "Zenith Crea Ofertas™ · Mega-skill TOP 1% para crear ofertas de alto valor percibido bajo el Método Zenith. Arranca con una PRE-FASE guiada por especificación: spec-architect enmarca el proyecto → spec-reviewer lo audita y clasifica hallazgos por severidad (🔴 crítico · 🟠 alto · 🟡 moderado · 🟢 bajo) → VALIDACIÓN HUMANA obligatoria → plan-architect genera el plan.md de todo + research. Un orquestador padre (zenith-quick-discovery) coordina 53 sub-agentes especializados (Opus/Sonnet/Haiku optimizado) + BLOQUE AVATAR & NICHO opcional (nicho-perfecto + competición de subavatares con NOMBRES NORMALES a 6 factores + investigación OBLIGATORIA Reddit/YouTube/Google Trends + núcleo con los 5 porqués + compuerta de validación en HTML) + 20 commands + 19 templates HTML print-to-PDF Drive-friendly + 32 knowledge files. Avatar deep (psicólogo + Reddit + YouTube) + Ángulos (Joseph Moreno) + Competencia (Meta Ad Library) + One Belief 4 variantes (Evaldo Albuquerque adaptado Joseph Moreno) + MECANISMO MAESTRO (bloque 03 liderado por mecanismo-maestro: pregunta 9 bloques primero y construye 6 piezas — causa raíz, problema, solución, nombre chicle, objeto brillante, mito de origen — cargando la BIBLIA DEL MECANISMO de 131 formaciones) + Valor percibido (Bencivenga) + 20 frameworks canónicos del Direct Response. Cada carpeta entrega MD + HTML estético imprimible a PDF con branding Zenith (cian + purple + Fraunces).",
-  "version": "2.4.6",
+  "version": "2.4.7",
   "author": {
     "name": "Josep · Método Zenith™"
   },

agents/24-offer-master.md

@@ -5,6 +5,12 @@ tools: Read, Grep, Write, Bash
 model: opus
 ---
 
+## 🎨 ESTÉTICA DE LA LANDING · motor claude-design (NO el copy)
+
+> La ESTÉTICA / diseño visual de la landing la dirige el agente `landing-estetica` (motor claude-design v2), que aplica `${CLAUDE_PLUGIN_ROOT}/skills/claude-design/SKILL.md` + sus resources: **dirección estética bold + HTML autocontenido** (un solo .html, CSS/JS inline, solo Google Fonts) **+ auditoría visual** (WCAG AA, mobile, touch targets). Se usa AL INICIO de montar la landing.
+> **Reparto claro: tú pones el COPY; claude-design pone la ESTÉTICA.** El copy sale del conocimiento de copywriting (headline + checklist, oferta, deseo, ganchos, storytelling…); la estética sale de claude-design (v2 = un solo HTML autocontenido; ignora el README v1 de Astro/npm).
+
+
 ## 🚦 CHECKLIST OBLIGATORIO DE HEADLINE (toda headline pasa por aquí · innegociable)
 
 > **NINGUNA headline / titular de landing / VSL / anuncio se entrega sin pasar por aquí.** Lee `${CLAUDE_PLUGIN_ROOT}/knowledge/headline-checklist-perfecta.md` y aplícalo SIEMPRE. No se puede saltar.

agents/25-output-architect.md

@@ -5,6 +5,12 @@ tools: Read, Grep, Write, Bash
 model: haiku
 ---
 
+## 🎨 ESTÉTICA DE LA LANDING · motor claude-design (NO el copy)
+
+> La ESTÉTICA / diseño visual de la landing la dirige el agente `landing-estetica` (motor claude-design v2), que aplica `${CLAUDE_PLUGIN_ROOT}/skills/claude-design/SKILL.md` + sus resources: **dirección estética bold + HTML autocontenido** (un solo .html, CSS/JS inline, solo Google Fonts) **+ auditoría visual** (WCAG AA, mobile, touch targets). Se usa AL INICIO de montar la landing.
+> **Reparto claro: tú pones el COPY; claude-design pone la ESTÉTICA.** El copy sale del conocimiento de copywriting (headline + checklist, oferta, deseo, ganchos, storytelling…); la estética sale de claude-design (v2 = un solo HTML autocontenido; ignora el README v1 de Astro/npm).
+
+
 # output-architect · El estilista de outputs
 
 ## QUIÉN SOY

agents/51-landing-estetica.md

@@ -0,0 +1,46 @@
+---
+name: landing-estetica
+description: DIRECTOR DE ESTÉTICA de landings (motor claude-design v2). Crea la ESTÉTICA / diseño visual de la landing — NO el copy. Elige UNA dirección estética bold y comprometida, produce el HTML autocontenido (un solo .html, todo CSS+JS inline, solo Google Fonts, sin build ni dependencias) y lo audita (mobile, contraste WCAG AA, touch targets). Aplica EXACTAMENTE el método de la skill claude-design (skills/claude-design). Se invoca AL INICIO de crear cualquier landing para fijar la estética. NO escribe el copy (eso lo hace el conocimiento de copywriting). Triggers "estética de la landing", "diseño visual de la landing", "haz la landing bonita", "dirección estética", "maqueta la landing", "el HTML de la landing", "claude-design".
+tools: Read, Grep, Write, Bash, WebSearch, WebFetch
+model: opus
+---
+
+# landing-estetica · El director de ESTÉTICA de la landing (motor claude-design)
+
+## QUIÉN SOY
+
+Soy el motor de DISEÑO/ESTÉTICA de landings. Mi trabajo es que la landing **pare el scroll por su aspecto**: una dirección estética bold ejecutada con precisión, no un sitio genérico con pinta de IA. **Yo me ocupo de la ESTÉTICA, no del copy** — el copy lo ponen los agentes de copywriting del plugin (headline + su checklist, oferta, deseo, ganchos, storytelling…); yo lo VISTO con el mejor diseño.
+
+## QUÉ APLICO (idéntico · skill claude-design, sin tocar nada)
+
+Aplico EXACTAMENTE el método `claude-design` que vive en este mismo plugin:
+- `${CLAUDE_PLUGIN_ROOT}/skills/claude-design/SKILL.md` (v2.0.0 — el comportamiento real)
+- `${CLAUDE_PLUGIN_ROOT}/skills/claude-design/resources/aesthetic-directions.md`
+- `${CLAUDE_PLUGIN_ROOT}/skills/claude-design/resources/audit-checklist.md`
+- `${CLAUDE_PLUGIN_ROOT}/skills/claude-design/resources/search-heuristics.md`
+- `${CLAUDE_PLUGIN_ROOT}/skills/claude-design/resources/single-html-template.html`
+
+> ⚠️ El comportamiento REAL lo define `SKILL.md` (v2.0.0): **UN solo archivo .html autocontenido** (todo CSS+JS inline, solo Google Fonts vía `<link>` con display=swap, sin npm/build/servidor/node_modules). IGNORA el `README.md` v1 que habla de Astro/Next/Tailwind/`npm install` — está obsoleto.
+
+## EL CONTRATO DE SALIDA (innegociable)
+
+- UN `.html` autocontenido en la carpeta de trabajo. Todo el CSS en un `<style>` en `<head>`; todo el JS en un `<script>` al final del `<body>`. Único recurso externo: Google Fonts. Sin build, sin dependencias. Se abre con doble clic; es portable a Vercel/Netlify/WordPress/Webflow.
+
+## EL PROCESO (claude-design)
+
+1. **Brief estético** (propósito, audiencia, tono). Si el copy ya viene de los agentes de copy del plugin, lo respeto tal cual.
+2. **Dirección estética** bold y comprometida (leo `aesthetic-directions.md`) — me comprometo a UNA (Brutalist Editorial, Swiss, etc.). Bold over tepid.
+3. **Plan de secciones** con el "twist" de cada una.
+4. **Digo la ruta del archivo** antes de escribirlo.
+5. **Creo el `.html`** partiendo de `single-html-template.html`.
+6. **Audito** (`audit-checklist.md`: accesibilidad, contraste WCAG AA, touch targets, mobile) y auto-corrijo.
+7. **Entrego**: nombre del archivo + cómo abrirlo.
+
+## LÍMITE (reparto con el copy)
+
+- **NO escribo el copy persuasivo.** El copy (headline con su checklist de 7 elementos + 4 U's, oferta, bullets, CTA, ganchos, storytelling) lo producen los agentes de copywriting del plugin. Yo recibo ese copy y lo visto con la mejor estética. Si aún no hay copy, uso placeholders claros marcados.
+- Me invocan **al INICIO** de montar la landing, para fijar la estética antes/junto al HTML.
+
+## REGLA
+
+La estética hace que **paren**; el copy hace que **compren**. Las dos, juntas. Bold over tepid: cada dirección comprometida, nada de "minimal moderno" tibio.

skills/claude-design/README.md

@@ -0,0 +1,245 @@
+# claude-design
+
+Una skill de Claude Code que genera páginas web Astro+React+Tailwind+Motion completas a partir de un brief, descubriendo galerías de componentes en tiempo real.
+
+**Versión**: 1.0.0
+**Stack producido**: Astro 4 + React 18 + Tailwind 3 + Motion 11
+**Velocidad de salida**: HTML-like (Lighthouse mobile ~95+)
+**Velocidad de generación**: 5–15 minutos por página (live research)
+
+---
+
+## Qué hace
+
+Cuando la invocas con un brief (cualquier nivel de detalle, desde "una landing pa mi curso de yoga" hasta un PDF de 50 páginas con avatar/oferta/secciones), la skill:
+
+1. **Lee tu brief** y clarifica si falta algo crítico (max 2-3 preguntas batched).
+2. **Compromete una dirección estética bold** y la presenta para que la apruebes.
+3. **Investiga en tiempo real** las mejores galerías de componentes (shadcn, Magic UI, Aceternity, Motion-Primitives, lo que sea trending) vía WebSearch.
+4. **Caza componentes** específicos (hero, features, pricing, etc.), comparando 2-3 candidatos por categoría.
+5. **Compone** un proyecto Astro completo con Tailwind config + design tokens + componentes traducidos al stack consistente.
+6. **Audita** mobile-friendliness, performance budget, y accesibilidad WCAG AA antes de entregar.
+7. **Te entrega** una carpeta lista para `npm install && npm run dev`.
+
+No memoriza URLs de componentes. Nunca caduca. Internet requerido.
+
+---
+
+## Cómo invocarla
+
+### Opción 1 — Slash command explícito
+
+```
+/claude-design landing para mi curso de yoga, audiencia mujeres 30-50, tono cercano
+```
+
+### Opción 2 — Trigger phrase natural
+
+Escribe cualquiera de estos en una conversación normal y se autoactiva:
+
+- "haz una landing para X"
+- "crea una página web de Y"
+- "diseña un sitio para Z"
+- "preciso una página para [W]"
+- "build a landing page for X"
+- "create a website for Y"
+
+### Opción 3 — Auditar páginas existentes
+
+```
+/audit ./mi-pagina.html
+/audit ./proyecto-astro/
+/audit https://misitio.com
+```
+
+Aplica los mismos checks (mobile, performance, a11y) sobre páginas que ya tengas hechas. Útil para refactorizar.
+
+---
+
+## Qué obtienes
+
+Una carpeta nueva en tu directorio actual con:
+
+```
+tu-proyecto/
+  package.json          # Astro + React + Tailwind + Motion
+  astro.config.mjs      # Configuración optimizada
+  tailwind.config.js    # Tokens de paleta y fuentes elegidos
+  tsconfig.json
+  README.md             # Cómo correrlo
+  src/
+    layouts/Base.astro  # Layout con SEO, viewport, skip link
+    pages/index.astro   # (y más rutas si es multipágina)
+    components/         # Componentes fetchados y traducidos
+    styles/globals.css  # Design tokens + reduced-motion canónico
+```
+
+Para correrlo:
+
+```bash
+cd tu-proyecto
+npm install
+npm run dev
+# Abre http://localhost:4321
+```
+
+Para deployar:
+
+```bash
+npm run build
+# Sube ./dist/ a Vercel/Netlify (drag-and-drop) o conecta el repo
+```
+
+---
+
+## Garantías técnicas
+
+| Garantía | Cómo se asegura |
+|---|---|
+| **Mobile-first** | Touch targets ≥44px, viewport meta, fluid type con clamp(), no overflow-x |
+| **WCAG AA** | Contraste calculado, alt en imágenes, ARIA labels, focus visible, semantic HTML, skip link |
+| **prefers-reduced-motion** | Bloque canónico en globals.css + inline en Base.astro como fallback |
+| **Performance** | Astro islands (zero JS por defecto), bundle target <100KB, fonts con display:swap |
+| **Imágenes** | Astro `<Image>` auto convierte a WebP/AVIF, lazy loading below-fold |
+
+Lighthouse mobile estimado: 90-100 (depende del hosting + imágenes que añadas).
+
+---
+
+## Iteración rápida
+
+Después de generar, si algo no te convence:
+
+```
+"el hero no me convence"
+"cambia el footer"
+"el color rojo es muy fuerte"
+```
+
+La skill recuerda los runners-up (segundas opciones) que evaluó durante la generación. Hace el swap en ~30 segundos sin re-investigar todo.
+
+Para cambios drásticos ("cambia toda la dirección estética"): hace una regeneración parcial (mantiene tu brief, redo de Stages 2-7).
+
+---
+
+## Cómo compartir esta skill
+
+La skill es **autocontenida** en `~/.claude/skills/claude-design/`. Para pasarla a otra persona:
+
+```bash
+# Comprime
+cd ~/.claude/skills/
+zip -r claude-design.zip claude-design/
+
+# Envía claude-design.zip por email/WhatsApp/Drive
+```
+
+Quien la reciba:
+
+```bash
+# Descomprime en su misma carpeta
+cd ~/.claude/skills/
+unzip claude-design.zip
+
+# Adicionalmente copia los slash commands
+cp ~/.claude/skills/claude-design/.commands-source/* ~/.claude/commands/  # (ver nota abajo)
+```
+
+**Nota**: los slash commands `/claude-design` y `/audit` viven en `~/.claude/commands/`, NO dentro de la skill. Si compartes solo la skill, la otra persona puede invocarla con trigger phrases naturales pero no con slash commands hasta que también copie los `.md` de commands. Considera empacar ambos:
+
+```bash
+cd ~/.claude
+zip -r claude-design-bundle.zip skills/claude-design/ commands/claude-design.md commands/audit-page.md
+```
+
+Quien la reciba:
+```bash
+cd ~/.claude
+unzip claude-design-bundle.zip
+```
+
+Listo.
+
+---
+
+## Requisitos para quien la use
+
+- ✅ Claude Code instalado
+- ✅ Node.js 20+ (para correr el proyecto generado)
+- ✅ Conexión a internet (para live research durante generación)
+- ⚠️ Plugin `firecrawl` (opcional, mejora velocidad de fetch para sitios cerrados)
+
+No requiere API keys, ni cuentas pagadas, ni MCPs propios.
+
+---
+
+## Estructura interna de la skill
+
+Para tu yo del futuro o quien quiera modificarla:
+
+```
+~/.claude/skills/claude-design/
+├── SKILL.md                      # Workflow principal, ~600 líneas
+├── README.md                     # Este archivo
+└── resources/
+    ├── search-heuristics.md      # Cómo y dónde buscar
+    ├── aesthetic-directions.md   # 22 direcciones estéticas + meta-rules
+    ├── audit-checklist.md        # Hard + soft checks para Stage 6
+    └── astro-template/           # Starter project para clonar
+        ├── package.json
+        ├── astro.config.mjs
+        ├── tailwind.config.js
+        ├── tsconfig.json
+        └── src/
+            ├── layouts/Base.astro
+            ├── pages/index.astro
+            └── styles/globals.css
+```
+
+`SKILL.md` lee los archivos de `resources/` on-demand (no los carga todos al inicio — context economy).
+
+---
+
+## Filosofía
+
+Esta skill se inspira en `frontend-design` de Anthropic (la que es solo 42 líneas de filosofía pura). El insight clave: el "magic" de buen diseño no está en código pre-hecho, está en cómo razona el modelo. Esta skill añade encima:
+
+1. **Investigación en tiempo real** (vs catálogo bakeado)
+2. **Compromiso a una dirección bold** (vs opciones tibias)
+3. **Audit estático mandatorio** (vs "espero que esté bien")
+4. **Stack opinionado** (Astro + React + Tailwind + Motion)
+5. **Output portable** (un proyecto = una carpeta)
+
+---
+
+## Versionado
+
+- **1.0.0** — versión inicial. Single skill + 3 resource files + Astro template + 2 slash commands.
+
+Cambios mayores futuros (v2):
+- Memoria cross-session de generaciones previas (anti-repetition de direcciones)
+- Soporte para frameworks alternativos (Next.js, SvelteKit)
+- Auto-deploy a Vercel/Netlify integrado
+- Generación de copy con neurocopy patterns
+
+---
+
+## Bugs conocidos / limitaciones v1
+
+- ⚠️ Si `WebSearch` retorna spam, la calidad del output sufre. La skill tiene fallback a librerías conocidas pero idealmente no se activa.
+- ⚠️ La generación es lenta (5-15 min) por la live research. Aceptado tradeoff vs catálogo bakeado.
+- ⚠️ No soporta web apps con auth/state complejo. Solo landings y multipage estáticos.
+- ⚠️ Audit estático correlaciona ~85% con Lighthouse real. Para 100% real, corre Lighthouse manualmente post-build.
+
+---
+
+## Créditos
+
+Construida por Pedro Núñez en colaboración con Claude (Anthropic).
+
+Inspirada en:
+- `frontend-design` skill de Anthropic
+- `web-architect-supreme` (el WAS anterior, predecesor con vanilla HTML)
+- shadcn/ui (modelo de copy-paste)
+- Astro + React island architecture
+- Stripe Press / Vercel design philosophy