# Plutto Landing > **Archivo canónico de instrucciones para Claude, Codex y cualquier otro agente de > código.** La configuración específica de cada proveedor vive en `.claude/`; no > dupliques estas instrucciones en otro archivo. Landing page estática de [getplutto.com](https://getplutto.com). Deploy automático en Cloudflare Pages. > **Sprint actual (abril 2026):** La ejecución día a día vive en `docs/planes-sprint/` - 3 planes (blog, formularios+HubSpot, checklist técnico). Abrir ese README primero antes de ejecutar cualquier tarea. ## Stack técnico - HTML estático (sin framework, sin build) - Tailwind CSS v3 (CDN con config inline para paleta plutto) - Vanilla JavaScript - Cloudflare Pages (hosting + CDN + auto-deploy desde `master`) - Google Fonts (Inter) ## Estructura del proyecto ``` index.html Página principal (hero, features, social proof, CTA) templates/base.html Esqueleto HTML reutilizable (head, nav, footer, schemas) templates/landing.html Template completo para landing pages con todas las secciones templates/articulo.html Template completo para artículos educativos (AEO optimizado) assets/css/custom.css Animaciones custom (fade-in) assets/js/main.js Menú móvil + IntersectionObserver para animaciones scroll assets/js/hubspot-forms.js Componente único de lead form + modal de demo (wiring a /api/lead-form) assets/js/analytics.js GA4 + Amplitude (autocapture + conversiones). Fachada window.PluttoAnalytics. IDs NO hardcodeadas: vienen de env vars de CF Pages (AMPLITUDE_API_KEY, GA_MEASUREMENT_ID) vía /api/analytics-config. Solo emite en producción assets/img/ Imágenes (favicon, og-image, logos de clientes) docs/planes-sprint/ Sprint actual - 5 planes (blog, forms+HubSpot, checklist, DNS, directorios). Fuente de verdad día a día docs/EMPIEZA-AQUI.md Guía de inicio + setup inicial docs/plutto.md Contexto del producto y palabras clave SEO docs/marca.md Design system completo (colores, componentes, schema, reglas) docs/estrategia/ Estrategia SEO/AEO de mediano plazo (plan-semanal, auditoría histórica) docs/templates/ Template de brief para páginas nuevas (llenar antes de crear) docs/contexto-rediseno-home.md Mapeo de assets y decisiones del home (solo si tocas el home) scripts/qa-captura.sh Captura de QA (desktop + móvil) del sitio local para adjuntar al PR qa/ Capturas de QA por rama (evidencia visual de cada cambio de front) _headers Headers de seguridad para Cloudflare Pages _redirects Reglas de redirección de Cloudflare Pages robots.txt Configuración para crawlers sitemap.xml Sitemap XML para SEO ``` ## Setup local ```bash git clone https://github.com/plutto-labs/landing.git && cd landing npx serve . ``` Abrir http://localhost:3000. ## Deploy Push a `master` → Cloudflare Pages despliega automáticamente. ```bash git add git commit -m "descripción del cambio" git push origin master ``` ## Skills disponibles | Skill | Descripción | |-------|-------------| | `/siguiente-tarea` | Te dice qué hacer a continuación según el plan SEO | | `/crear-articulo` | Crear artículo educativo con optimización AEO | | `/nueva-pagina` | Crear una página nueva desde template | | `/nueva-seccion` | Agregar una sección nueva a una página existente | | `/publicar` | Validar y publicar cambios (checklist + git push) | | `/auditoria-seo` | Auditoría completa de SEO + AEO | | `/verificar-consistencia` | Verificar consistencia de marca (colores, fonts, spacing) | | `/mejorar-copy` | Mejorar redacción y copy del landing | | `/auditoria-accesibilidad` | Auditoría de accesibilidad WCAG 2.1 AA | | `/revisar-rendimiento` | Revisar rendimiento y optimizaciones del sitio | | `/optimizar-imagenes` | Auditar y corregir atributos de imágenes | | `/migrar-blog` | Migrar artículos del subdomain blog a /blog/ | | `/plutto-blog` | Escribir artículos del blog con pipeline anti-IA y voz auténtica | | `/plutto-design` | Diseño anti-IA adaptado a Plutto (paleta, Inter, Tailwind CDN) | | `/frontend-design` | Diseño frontend distintivo (Impeccable - skill base) | | `/audit` | Auditoría técnica de calidad visual (anti-patrones, accesibilidad) | | `/critique` | Evaluación UX con scoring cuantitativo | | `/animate` | Agregar animaciones y micro-interacciones | | `/polish` | Pase final de calidad: alineación, spacing, detalles | | `/bolder` | Amplificar diseños tímidos para más impacto visual | | `/arrange` | Mejorar layout, spacing y ritmo visual | | `/typeset` | Mejorar tipografía, jerarquía y legibilidad | | `/colorize` | Agregar color estratégico a interfaces monótonas | ## Reglas para el asistente ### QA visual (obligatorio en cambios de front) Todo cambio que se vea en pantalla se sube con una captura. Aplica a `.html`, `assets/css/`, `assets/js/`, `templates/` y `assets/img/`. No aplica a `functions/`, `sitemap.xml`, `robots.txt` ni docs. Orden fijo, sin saltarse pasos: 1. Hacer el cambio. 2. `bash scripts/qa-captura.sh ` - deja PNG desktop y móvil en `qa//`. Ej: `bash scripts/qa-captura.sh demo/ formulario-demo` 3. **Abrir la captura y mirarla.** Generarla no es QA: hay que confirmar que el cambio se ve y que nada se rompió alrededor. Si el cambio queda fuera de cuadro, repetir con `--alto N` o apuntando a un ancla (`"index.html#faq"`). 4. Commitear el PNG junto al cambio. 5. En el cuerpo del PR, incrustar la imagen con la URL permanente por SHA: `![QA](https://github.com/plutto-labs/landing/raw//qa//.png)` Esto no es opcional ni depende de que el asistente se acuerde: el hook `.claude/hooks/qa-visual-guard.py` bloquea `git push` y `gh pr create` si la rama toca front y no trae captura, y el check `QA visual` de GitHub Actions falla el PR por lo mismo. Si el guard se equivoca (cambio real que no se ve en pantalla), correr el comando con `CLAUDE_ALLOW_NO_QA=1` y explicar en el PR por qué no aplica. ### Generales - Responder siempre en español latinoamericano - Usar templates de `templates/` como base para páginas nuevas. Consultar `docs/marca.md` solo para componentes individuales no incluidos en los templates - Leer `docs/plutto.md` para keywords y contexto de producto - Prose (new or edited): articles, prepositions and conjunctions stay with the next word (` `), so a line never ends on "un", "su", "los" or "de". After editing a page run `python3 scripts/nbsp-function-words.py` (`--check` only reports). Do not glue every short word: chains like "y por qué es" make ragged lines - Nunca eliminar atributos `data-animate` - Mantener meta tags OG y Twitter Card sincronizados - Actualizar `sitemap.xml` al agregar nuevas páginas - No modificar `_headers` sin autorización explícita ### Colores y diseño - Color primario: `plutto-600` (#5563E6). **Nunca usar indigo-600** - Tanto `index.html` como los templates ya usan plutto-600 - No usar dark mode (no agregar clases `dark:`) - Font: Inter. No agregar otras fuentes - Incluir Tailwind config inline en el `` de cada página (ya incluido en los templates) ### Diseño anti-IA (Impeccable + plutto-design) - Al crear o modificar páginas, consultar siempre el skill `/plutto-design` para guías anti-IA adaptadas a Plutto - Cada sección debe tener un layout DIFERENTE a la anterior (no repetir grids simétricos) - Variar spacing vertical entre secciones (`py-16`, `py-24`, `py-32`) - no usar `py-20` en todas - Usar clases de `custom.css`: `.card-hover`, `.bg-mesh-light`, `.bg-mesh-dark`, `.grain`, `.animate-slide-left/right`, `.animate-scale-in` - Ver anti-patrones completos en `docs/marca.md` sección 16 - Skills de Impeccable disponibles: `/audit`, `/critique`, `/bolder`, `/polish`, `/animate`, `/arrange`, `/typeset`, `/colorize` ### SEO y AEO - HTML semántico: `
`, `
`, `` nativo, `
    `/`
      ` nativo - 1 `

      ` por página, `

      ` por sección, `

      ` sub-items. Nunca saltar niveles - Cada sección abre con 40-60 palabras de respuesta directa (optimización AEO) - Schema JSON-LD obligatorio: `BreadcrumbList` + el que corresponda (ya incluidos en `templates/`) - Meta tags completos: `` (50-60 chars), `<meta description>` (120-158), `og:image`, Twitter Card, `canonical` - Hero image con `fetchpriority="high"`. Resto con `loading="lazy"` + `width`/`height` - Breadcrumbs (HTML + schema) en todas las páginas internas - Mobile: CTA sticky, tap targets 48x48px min, font 16px min ### Usar palabras clave SEO de `docs/plutto.md`