Guía de ejecución, pendientes y prompts de medios: [agent-playbook.md](agent-playbook.md). > Actualización de marketing 2026-09-14: nombres cortos y capacidades agrupadas; ver `docs/marketing/products-navigation.md`. Designer está disponible. Este criterio público reemplaza el naming con prefijos; no cambia nombres internos. # Sistema visual del sitio público — 2026.09 La referencia visual vigente es `/brandkit`, con Home, XIA Agents y XIA Coder como aplicaciones del sistema. Este documento es el contrato de implementación para cualquier agente, sin dependencia de un proveedor LLM. Alcance: sitio público Napsix; NO dashboard, admin, `packages/site-ui` ni sitios de tenants (usan su marca propia). - Tokens y CTA: `apps/web/src/components/site/site-theme.css`. Los CTAs usan `CtaLink` / `CtaAnchor`, `motion="expand"` o `motion="pill"`; `site-cta-compact` adapta el navbar sin aumentar su altura. - Composición: `human-landing.css`, `HumanHero`, `HumanProductLinks`, `HumanDemo`, `HumanValueSections`. Los destinos son enlaces completos con foco visible, icono, descripción y movimiento moderado. - Tipografía: JetBrains Mono para títulos, navegación y CTAs; Inter local para lectura larga. Fondos cálidos, carbón, verde y lima de interfaz. - Marca: conservar los SVG maestros y su lima #CAF31D. El token `--accent` de la interfaz permanece separado; no recolorear los logos con los tonos de superficie. - Motion: Reveal del kit, pausa en medios y demos, y `prefers-reduced-motion`. No usar animación como único medio para comunicar información. - Comparaciones: `CompareTable` general conserva tabla y scroll horizontal en móvil. Solo Home usa `human-compare-table` para apilar DOS alternativas con etiquetas explícitas en las celdas. No aplicar esa clase a tablas de tres o más alternativas. Usar datos verificables y condiciones claras. Guía editorial ES/EN: `apps/web/public/brand/napsix-style-guide.es.md` y `.en.md`. Los componentes de `/brandkit` muestran los estilos reales, no una segunda implementación de ejemplo. Índices de descubrimiento: [hubs-reference.md](hubs-reference.md). HubReference y HubDirectory unifican Plataforma, Soluciones e Industrias con búsqueda, filtros, destinos visuales y estados accesibles. Ejemplo vivo en Brandkit. Espacios: [spaces-reference.md](spaces-reference.md). Rooms, Projects, Inbox y Napsix CRM aplican la receta Coder con SpaceOverview compartido entre walkthrough y video. ## Exportar Familia tecnica y comercial: [platform-reference.md](platform-reference.md). Developers, Gateway, Modelos y Pricing comparten PlatformHero/PlatformNav; PlanGrid y PlanComparison unifican la presentacion sin duplicar precios ni limites. Brandkit muestra la comparativa real del Gateway. Catálogo y captación técnica: [integrations-reference.md](integrations-reference.md). `/integraciones` y `/integraciones/partners/aplicar` muestran la receta de apps animadas, búsqueda, fichas desplegables y wizard, sin video ni fotografía. Distinguir usuario de conexiones de desarrollador de una integración. `python scripts/marketing/export-style-kit.py` Genera `napsix-style-guide.css` a partir del CSS fuente y `napsix-human-style-kit.zip` con la guía bilingüe y los SVG oficiales. Ejecutar después de modificar estilos o guías. El CSS descargable es una referencia portable; video, Reveal y demos necesitan los componentes React. ## Medios propios por pagina Crear imagenes y/o videos propios para cada nueva pagina o rediseno, salvo excepcion expresa del usuario. No reutilizar medios de otro producto como si fueran propios ni llamar video a una animacion CSS. Logos y textos de interfaz se mantienen como assets oficiales y HTML. KeyPartnerMedia muestra la receta fotografica en Mercado y Tiendanube; las demos operativas siguen siendo interactivas. ## Fuentes y precedencia 1. `AGENTS.md` y `docs/REGLAS.md`: invariantes, naming, i18n, layout, logos y accesibilidad. 2. Este contrato y componentes reales de `apps/web/src/components/site/`: APIs vigentes. 3. `/brandkit`: ejemplos renderizados de las mismas implementaciones. 4. `docs/marketing/site-design-audit.md` y `public/brand/site-design-inventory.json`: estado orientativo de migración, regenerable. No son prueba de QA visual. 5. `apps/web/src/data/product-catalog.ts` y `i18n/routing.ts`: productos, estados y URLs. Nunca deducir una URL traduciendo un nombre. Las páginas antiguas son contenido a migrar, no referencia estética. `HeroOrbit`, `Glow`, héroes oscuros y mocks técnicos siguen existiendo para compatibilidad; no elegirlos por defecto en nuevas páginas. Investors y mocks de vendors tienen excepciones declaradas en REGLAS #16. ## Tokens y composición ### Versión final: movimiento y navegación - Una sola paleta, la moderna de `site-theme.css`; la antigua sección de paleta oscura queda retirada del brandkit. Los SVG maestros conservan sus tintas de archivo y no definen otra paleta de interfaz. - Todo carrusel de integraciones usa `LogoWall variant="marquee"`: chip horizontal con logo original + nombre visible, pausa manual y pausa al hover/foco; una sola lista accesible y copia decorativa oculta a lectores. Con reduced-motion queda desplazable sin autoplay. No enviar items duplicados. - `PageProgressNav({items: {id,label}[],label})`: orientación lateral en escritorio amplio, `aria-current`, etiquetas al hover/foco y enlaces a IDs reales. Se oculta debajo de 1280 px para no tapar contenido. No intercepta rueda ni impone scroll-snap. Usarlo en páginas largas con 5–9 hitos, no por cada tarjeta. - `Reveal`: animación de entrada por capas, 80 ms de separación vía index. El encabezado inicia la secuencia, luego visual y tarjetas; no aplicar dos reveals al mismo elemento. Visible en SSR y sin JS; reduced-motion muestra el estado final. - `ProgressMeter({label,value,detail,index?})`: porcentaje 0–100, barra que se llena una vez al entrar, texto siempre visible y semántica meter. Exigir fuente para cifras comerciales; en brandkit indicar explícitamente que son ejemplos. Nunca simular progreso de una tarea real con estos porcentajes. - CTA de apps: `Explorar {nombre}` / `Explore {name}` con CtaLink motion=expand, superficie completa y foco visible. Evitar el ambiguo “Conocer la app”. No confundir explorar una landing con abrir una app autenticada. - Smooth scrolling nativo para anclas de la familia Human. Respetar reduced-motion, navbar clearance y foco del destino. Las animaciones no cambian el orden de lectura ni ocultan opciones. Ejemplos vivos: `/brandkit#patterns`; aplicaciones: Home y XIA Agents. Investors inspira estos recursos; su deck conserva la excepción visual propia. | Decisión | Contrato | |---|---| | Superficie | `--site-paper` #FAF9F6; alternar con tintes suaves, no múltiples gradientes | | Texto | `--site-ink` #242A27; secundario `--site-muted` #5D665F | | Acento | `--site-green` #385541 para apoyo; `--site-lime` hsl(72 90% 53%) para acción | | Logo | SVG maestro #CAF31D intacto; no igualarlo al token de interfaz | | Separadores | `--site-line` #DEDFD7; no usarlo como único indicador de foco o control | | Escala de espacios | 8/16/24 px para interiores; `Section` controla ritmo exterior | | Radio | `--site-radius-card` 22 px; CTA conserva el radio de su variante | | Tipografía | JetBrains Mono 600/700 títulos/nav/CTA; Inter 400/600 lectura; importar fuentes locales | | Encabezados | Un h1; h2 por sección; h3 en tarjetas; títulos fluidos sin alturas fijas | | Ancho | `Container`/`Section`; no inventar max-width por página | | Navbar | `MarketingMain` o `pt-navbar md:pt-navbar-lg`; nunca compensar con píxeles locales | | Hero producto | Texto y máximo 2 CTAs a izquierda, media 1:1 derecha; una columna móvil; flip words con altura estable; 1–2 chips de novedades | | Motion | `Reveal index` (80 ms); interacción 180–300 ms; evitar ocultar texto si JS falla | | Medios | Personas en oficinas, XIA y UI de marca; poster, pausa, muted/playsInline, error y reduced motion; no generar texto/logos dentro del video si deben ser exactos | ## Registro de componentes existentes Todos los paths siguientes son relativos a `apps/web/src/components/site/`. Leer el archivo antes de usarlo; los tipos exportados son la autoridad. | Necesidad | Componente y API | Estado / ejemplo | |---|---|---| | Estructura | `Section({children,id,tone,size,width})`, `Container` | Existentes; `tone=none` si la clase Human define el fondo | | Entrada | `Reveal({children,index,className})` | Único reveal; no recrear IntersectionObserver para secciones | | Acción interna | `CtaLink({href,motion,size,children})` | `motion=expand` primaria; `pill` secundaria; `site-cta-compact` nav | | Ancla/descarga | `CtaAnchor({href,download,motion,children})` | No hacer botones sin acción; usar button para cambios de estado | | Hero con video | `HumanHero`, `HumanFilm`, `HumanStory` | HumanHero conserva Home/Agents; ProductHero recibe contenido y media. HumanFilm acepta story O media explícito, con overlay opcional | | Comparación | `CompareTable({caption,rowHeader,columns,rows,tone})` | `tone=human` para nuevas páginas; `columns: {label,highlight?}[]`; `rows: {label,cells}[]`; boolean/null tipados, nunca comparar strings traducidas | | Tabla informativa | `DataTable({caption,columns,rows,note})` | `rows: {id,cells}[]`; primera celda encabezado; igual cantidad de celdas/columnas; scroll con teclado | | Beneficios | `FeatureGrid({items,columns,tone,interactive})` | `tone=human`: papel cálido, icono destacado, índice decorativo y acento inferior; `items: {title,description,icon?,bullets?}[]`. Informativas sin hover de botón; entrada escalonada con Reveal. No usar la variante light antigua como referencia nueva. | | FAQ | `FAQ({items,tone})` | `tone=human` para nuevas páginas; `items: {q,a}[]`; details nativo, varias respuestas abiertas | | Métricas | `StatBand({items,locale})` | `value` o `countTo`; fuente y período obligatorios en contenido; no cifras ficticias | | Destinos | `HumanProductLinks` | Cuatro destinos fijos hoy; generalizar datos antes de otros catálogos | | Apps/medios | `HumanAppsCarousel`, `HumanDemo`, `HumanValueSections` | Aplicaciones de Home/Agents, no APIs universales todavía | | Marca/integraciones | `LogoWall`, `IntegrationLogo` (fuera del kit) | Logos del SSOT, link real y texto alternativo; no letras simulando logos | ## Backlog concreto antes de migrar todo | Prioridad | Pieza | Acción y aceptación | Primeras páginas | |---|---|---|---| | P0 | Hero/media configurables | Disponible: ProductHero + HumanFilm(media). Validar contenido, medios y controles por producto | Productos, Rooms | | P0 | CatalogToolbar | Extraer búsqueda/filtros de FeaturesIndex e integrations-grid; label, count, reset, empty, teclado y URL compartible | Plataforma, Agentes, Integraciones | | P0 | CatalogCard + DetailHeader | Extraer agent-card y cards de integración; estados live/beta/soon no solo por color; destino, logo y descripción | Catálogos y detalle Agentes | | P0 | PlanGrid + PlanComparison | Disponible en la familia Platform; fuente comercial en plans-catalog, moneda regional preservada, selección y CTA localizado | Precios, Gateway | | P1 | FormField + FormFeedback | Extraer contacto/partners: labels, ayuda, required, error con aria-describedby, disabled, submitting y confirmación | Contacto, partners | | P1 | WorkflowSteps + DemoFrame | Generalizar HumanDemo; estados idle/running/paused/complete/error; transcript y fallback | Productos, soluciones | | P2 | EditorialLayout + ResourceCard | Crear lectura acotada, TOC, autor/fecha, enlaces y contenido largo | Novedades, legales, developers | | P2 | StatusNotice + EmptyState | Extraer estados de status/catálogos; icono, texto y recuperación; aria-live solo para cambios dinámicos | Status, búsqueda | | P2 | ProofCard + Quote + TrustGrid | Crear evidencia con fuente/fecha, permisos y contexto; jamás fabricar clientes o porcentajes | Seguridad, sectores, partners | Los nombres del backlog son propuestas, NO exports existentes. Una pieza se considera disponible cuando tiene tipos, ejemplo real en brandkit, estados documentados, ES/EN y QA móvil/teclado/reduced-motion. No crear wrappers vacíos para marcar tareas hechas. ## Recetas por tipo de página - **Producto/espacio:** hero humano + prueba contextual + demo problema→acción→resultado + beneficios + comparación + integraciones relacionadas + FAQ + CTA. Evitar repetir el mismo mensaje en todas las secciones. - **Catálogo:** encabezado claro + búsqueda/filtros + resultados con logos/previews + estados vacío/carga/error + CTA. No poner un video por tarjeta ni esconder opciones solo en hover. - **Solución/sector:** tarea y audiencia + caso verificable + flujo + apps relevantes + comparación y límites + contacto. Colores de vendors solo dentro de su mock autorizado. - **Confianza/editorial:** hero sobrio + índice + secciones legibles + evidencias/fecha + enlaces relacionados. El flip corresponde al hero comercial, no a términos legales ni mensajes de estado. - **Formulario:** encabezado + grupos breves + validación cerca del campo + resumen de error enfocable + confirmación real; conservar backend existente y no simular envíos. ## Estados que deben existir | Pieza | Estados / interacción | |---|---| | CTA | default, hover, focus-visible, active; disabled solo para button; spinner con texto al enviar | | Select real | label persistente, valor, placeholder, opciones por teclado, disabled, error; usar primitive accesible existente, no div con onClick | | Cards de enlace | toda la card enlazada, foco visible; no links anidados; movimiento prescindible | | Tablas | caption, scope, empty; scroll horizontal; cifras Intl según locale; fuente y condiciones | | FAQ | cerrado/abierto por teclado; contenido disponible sin JS; transición desactivada con reduced-motion | | Video/carrusel/demo | poster, play/pause, error; pausa fuera de vista; no autoplay con reduced-motion/saveData; alternativa legible | | Filtros | valor, activos, clear, cero resultados; navegación por teclado; no cambios de foco sorpresivos | ## Hallazgos de auditoría que requieren decisión editorial - `/plataforma` existe, pero FeaturesIndex conserva hero oscuro y catálogo propio: adaptar desde el nuevo sistema, no crear otra ruta. - Revisión visual de `/plataforma` en escritorio: bloque oscuro dominante, búsqueda pequeña y tarjetas con fondos estrechos respecto de su contenido. La extracción de CatalogCard debe corregir el ancho de su superficie y la jerarquía del catálogo, no solo el color del hero. - `/productos/concierge` y su entrada en product-catalog siguen activos aunque AGENTS dice que Concierge es un canal, no un producto. Resolver naming/destino y redirección antes de rediseñar; no borrar la URL unilateralmente. - Calendar y Tasks comparten destinos Mail y Projects; outbound comparte CRM. Eso no es una página faltante. Design y broadcasts son soon hacia roadmap; no anunciarlos como lanzados. - `/plataforma/knowledge` es redirect deliberado a Storage. `/brandkit.com` es alias: conservarlos. - Partnership, promo dinámica y partners/aplicar no tienen OG/Twitter locales. Revisar política de indexación/metadatos heredados antes de agregar assets; el inventario marca ausencia local, no falla confirmada. - No se detectaron destinos de catálogo live sin plantilla en el inventario; comprobar también respuestas y permisos al migrar. Los slugs dependen de datos; no inferir 404 desde el nombre del archivo. ## Proceso obligatorio para el próximo agente 1. Leer fuentes; ubicar ruta canónica y contenido real. Elegir receta y registrar piezas reutilizadas/faltantes. 2. Crear/extender en el kit, nunca copiar otra familia de cards/CTA/FAQ en la página. Añadir el ejemplo a BrandComponentLibrary. 3. ES/EN en `messages`; links con `@/i18n/navigation`; naming en glossary. Mantener metadatos y rutas existentes. 4. Verificar 390 px, 768 px y escritorio; teclado, foco, 200% zoom, reduced-motion y estado sin media. Confirmar ausencia de overflow global y CTA legible. 5. Correr `pnpm i18n:check`, `pnpm design:check`, `pnpm layout:check`, ESLint de cambios y TypeScript. Build antes de entrega/deploy. No usar HTTP 200 como prueba de layout. 6. `python scripts/marketing/audit-site-design.py` y `python scripts/marketing/export-style-kit.py`; documentar validación visual y actualizar clasificación cuando la ruta esté migrada. `pnpm session:check` al cerrar. Deploy sigue su autorización habitual. ## Esqueleto de composición (orientativo) ```tsx // Async Server Component. Obtener t con getTranslations y locale de params. // MarketingMain aporta navbar clearance. Importar desde sus archivos reales.

{t("title")}

{t("description")}

 {t("cta")}
``` En una landing comercial sustituir el encabezado del esqueleto por HumanHero una vez generalizado. No copiar JSX con variables inexistentes como si fuera un componente listo. El contrato orienta; TypeScript y el render verifican. ## Receta de producto verificada: XIA Coder Composición: `components/site/CoderReference.tsx`; ruta y metadata en la página existente. Insurance no se migra en este cambio. - `ProductHero({eyebrow,title,words,description,news,actions,reassurance,media})`: shell Human, flip words, 1–2 chips y máximo dos CTAs. `media` acepta HumanFilm con assets explícitos, alt/caption traducidos y overlay HTML para marca legible. Coder tiene una escena generada propia (`coder-web-v2.mp4` / `.webm`) con equipo y web de arquitectura, diferenciada de Home/Rooms. La demostración por pasos es React y muestra tres composiciones distintas: pedido, edición y revisión para publicar. - `WorkflowDemo({steps,label,playLabel,pauseLabel,note})`: steps `{id,title,description,visual}`. Avanza cada 5.5 s solo visible y con pestaña activa; selección manual pausa. Botones nativos con aria-pressed, todos los textos de pasos visibles en SSR. Reduced-motion permite selección manual sin autoplay. Estados: reproducción, pausa y paso seleccionado. No representa una operación real ni inventa estados de éxito de backend. - `ComparisonStatus({state,children})`: included = check verde; unavailable = cruz roja; setup = herramienta ocre. Texto obligatorio y explícito; iconos decorativos. No usar una cruz para trabajo configurable ni una casilla verde para desconocido. - `CompareTable className="site-compare-emphasis" tone="human"`: encabezados y celdas más amplios, columna highlight verde con borde, separación clara. Mantiene semántica table y scroll horizontal de teclado. No asignar colores según strings traducidas. - Comparación de Coder describe flujos (herramientas separadas vs entorno Napsix), no capacidades actuales de competidores sin verificar. Los planes leen `getSitePlanCaps`; no copiar sus cifras a traducciones. - Los ejemplos de creación son ilustrativos y se identifican como tales; no se presentan como clientes ni URLs publicadas. No prometer SaaS, pagos o login por el solo hecho de disponer de dominio propio. - Registrar cada ruta con hero claro en `Navbar.hasHumanHero`; comprobar contraste desde scrollY=0. - Orden: hero → demo → usos → conexiones/equipo → comparación → dominio → planes → FAQ → cierre. - Brandkit incluye WorkflowDemo y los tres estados reales. Para otra página, reutilizar APIs y crear contenido localizado; nunca copiar CSS ni el componente CoderReference con otro nombre. ### Comprobación reproducible de la receta Con el build de producción servido en localhost:3105, ejecutar `node scripts/marketing/verify-coder.mjs` (override: `MARKETING_PREVIEW_ORIGIN`). Comprueba ES/EN, ausencia de errores React, reproducción real de media, selección y pausa de pasos, activación por teclado, estados de ambas tablas, contraste del encabezado destacado, ausencia de overflow de página a 390/768 px, reduced-motion y contenido visible sin JavaScript. Build, TypeScript, ESLint, i18n, design y layout se verifican por separado. Componer dentro de `.human-landing` e importar `human-landing.css` y las fuentes Inter locales como en CoderReference. Los antiguos archivos `components/coder-landing/` ya no son la composición activa ni una referencia para nuevos productos. ### Apps nativas: parte obligatoria de las páginas de producto Incluir siempre `HumanAppsCarousel` como sección complementaria antes del FAQ/cierre: títulos y descripción localizados, previews de apps nativas y CTA al producto correspondiente. Se alimenta de PRODUCT_CATALOG (solo live), con pausa, navegación manual y reduced-motion. No sustituirlo por LogoWall: LogoWall comunica integraciones externas; HumanAppsCarousel comunica las apps de Napsix. Coder lo aplica en `#native-apps`. ### Demostraciones con cambios visibles Cada paso de WorkflowDemo debe cambiar la tarea Y la composición visual. En Coder: pedido en chat y brief → web con fotografía, contacto y cambio aplicado → checklist de revisión con preview. No reutilizar un mismo bloque de placeholders cambiando solamente el título. El paso final muestra revisión pendiente y nunca simula publicar un sitio real. # Referencia de soluciones: Insurance La receta de industria vigente está en [insurance-reference.md](insurance-reference.md): hero fotográfico de fondo con `SolutionHero`, tres escalas de audiencia, film propio 16:9 más demo HTML de estados distintos, comparativa marcada, Enterprise/Comunidades y carrusel nativo obligatorio. Ejemplo vivo en Brandkit. No copiar el antiguo hero con órbita de SectorPage; las otras industrias siguen pendientes de migración. ## Catálogo público de Agentes Receta y contratos: [agents-reference.md](agents-reference.md). Usar AgentsReference y PublicAgentCard, sin modificar componentes del dashboard. ## Key Partners Receta de integraciones estrategicas: [key-partners-reference.md](key-partners-reference.md). Mercado Libre + Mercado Pago y Tiendanube comparten KeyPartnerReference con casos y onboarding propios. ## Soluciones por industria y rol [solutions-reference.md](solutions-reference.md) registra las 14 soluciones, el caso de uso y las herramientas de cada una. SolutionReference y SolutionWalkthrough extienden la referencia de Seguros con medios propios y contenido ES/EN; no duplicar plantillas por slug. Resultados: [outputs-reference.md](outputs-reference.md). Docs, Sheets, Dashboards y Forms comparten la receta Coder, con overviews distintos, medios propios y recuperación de reproducción. ### Coder: overview dentro del hero `CoderHeroOverview` se pasa al prop `overlay` de `HumanFilm`. Muestra pedido, revision visual y resultado con textos ES/EN del namespace coderReference. Su estado sigue currentTime del video: pausa, seek y loop se mantienen sincronizados. No crear un segundo autoplay independiente. El primer estado existe en SSR; reduced-motion deja el video y la composicion detenidos. Correo, archivos y fuentes: [connected-reference.md](connected-reference.md). Mail, Almacenamiento y XIA Crawl usan SpacesReference con ConnectedCanvas compartido entre la web y seis videos ES/EN; puesta en marcha con DataTable. Ejemplos reales en Brandkit #connected-reference. Marketing y automatización: [growth-reference.md](growth-reference.md). Ads, Napsix Campaigns y Automations aplican SpacesReference con GrowthCanvas compartido por demos y videos propios.