Sentinel by Kayzen
Vender un producto de seguridad a ingenieros: cada afirmación tenía que poder demostrarse.
- Año
- 2026
- Diseño
- 4 semanas
- Stack
- Next.js · React · TypeScript · Tailwind · Vercel
- Posicionamiento
- Diseño
- Desarrollo
- SEO técnico
- Redacción
- falsos positivos declaradoscada hallazgo va acompañado de un PoC reproducible
- 0
- primer renderizado útilHTML estático servido desde la CDN
- < 1 s
- dominios de terceros llamados al cargar
- 0
Lo que había que resolver.
El contexto
Sentinel es la plataforma de pruebas de intrusión autónomas de Kayzen Web. Sus agentes de IA no analizan el código: ejecutan la aplicación, intentan realmente la explotación y adjuntan una prueba de concepto reproducible a cada vulnerabilidad confirmada. El sitio es el escaparate comercial del producto y su puerta de entrada a la prueba.
La limitación
El público objetivo (CISO, lead developers, equipos de plataforma) es el más impermeable que existe al marketing. Un sitio de seguridad que promete «protección total» pierde su credibilidad en la primera línea. Hacía falta un sitio que despertara interés sin prometer nunca de más, y que siguiera siendo legible para un directivo sin perfil técnico que compara tres proveedores.
La respuesta
Invertimos la jerarquía habitual: la prueba antes que la promesa. La página de inicio muestra primero un extracto de informe real (la vulnerabilidad, la petición de explotación, la corrección propuesta) y solo después el argumentario. El vocabulario sigue siendo el del oficio (PoC, falso positivo, CVSS) porque el lector lo conoce y suavizarlo se tomaría por ignorancia.
Cada decisión de diseño, y su porqué.
Oscuro por defecto, pero no decorativo
El tema oscuro es la convención del sector: las herramientas de seguridad viven en un terminal. Aquí es funcional: los bloques de código y los extractos de informe son los elementos más leídos de la página, y un fondo oscuro reduce el deslumbramiento en lecturas largas. Los contrastes texto/fondo se mantienen por encima de 7:1, es decir, nivel AAA y no el mínimo AA.
La prueba como componente
Un componente reutilizable de «extracto de informe»: cabecera de la vulnerabilidad, gravedad CVSS, petición, respuesta, corrección. Aparece cuatro veces en la página, con casos distintos. Es el único elemento animado: la atención va allí donde se juega la decisión de compra.
Ninguna ilustración abstracta
Ni candados, ni escudos, ni globos de malla. Las imágenes son capturas de la herramienta. En este mercado, la iconografía genérica es la señal más fiable de que un producto aún no existe.
Densidad bajo control
Una longitud de línea limitada a 68 caracteres y una escala tipográfica fluida con clamp(). El contenido es denso por naturaleza; es la maquetación la que debe compensarlo, no el lector.
Paleta del proyecto
Tinta
#0B1120
Fondo de página
Pizarra
#1E293B
Tarjetas y bloques de código
Señal
#38BDF8
Enlaces y acentos
Alerta
#F43F5E
Solo gravedad crítica
Sistema tipográfico
Titulares
Inter (grosores 600–800)
Texto de lectura
Inter (400–500)
Una sola familia, dos funciones. Los extractos de informe usan la pila monoespaciada del sistema: no se descarga ninguna tipografía adicional.
Lo que hay bajo el capó.
- Next.js
- React
- TypeScript
- Tailwind
- Vercel
Next.js con renderizado estático
Cada página se genera en el build. El escaparate de un producto no tiene ningún dato dinámico que servir: un renderizado en servidor permanente costaría latencia y superficie de ataque a cambio de nada. El HTML completo se sirve desde la CDN.
Cero dependencias de terceros al cargar
Ninguna tipografía de Google, ningún script de analítica externo, ningún iframe de chat. En un sitio de seguridad, cada dominio de terceros llamado en el primer renderizado es un argumento en contra, y un punto de entrada real en la cadena de suministro.
Cabeceras de seguridad completas
Content-Security-Policy estricta, HSTS con preload, Referrer-Policy, Permissions-Policy cerrada por defecto. Es lo mínimo que se espera de un editor de seguridad, y el primer reflejo de un cliente potencial con perfil técnico es abrir la pestaña Red para comprobarlo.
Motor de código abierto, y se dice
El motor de ejecución se apoya en el proyecto de código abierto Strix. El sitio lo dice y lo enlaza en lugar de ocultarlo: ante este público, la trazabilidad de la pieza técnica vale más que una caja negra.
Cómo se hace encontrar la web.
Búsquedas de comparación en lugar de genéricas
«Pentest automatisé» (pentest automatizado), «DAST vs pentest manuel», «faux positifs scanner de vulnérabilités» (falsos positivos de escáneres de vulnerabilidades): búsquedas de mitad de embudo, de poco volumen y con una intención muy alta. Pelear por «ciberseguridad» no habría servido de nada.
Marcado SoftwareApplication
JSON-LD SoftwareApplication con categoría, sistema operativo y oferta, más una FAQPage sobre las objeciones recurrentes («¿pueden los agentes romper mi producción?»). Son esas respuestas las que citan los asistentes de IA.
Metadatos sociales cuidados
El producto se comparte entre colegas en Slack y en LinkedIn. Open Graph y la tarjeta de Twitter se tratan, por tanto, como un canal de captación, con una imagen dedicada y no el logotipo.
Utilizable por todo el mundo.
Desde junio de 2025, la Ley Europea de Accesibilidad (European Accessibility Act) exige la accesibilidad digital a buena parte de los servicios en línea. La abordamos desde el diseño, no como un parche posterior.
Contraste AAA en el cuerpo de texto
El tema oscuro es la trampa clásica: gris claro sobre gris oscuro. Se midieron todos los pares; el cuerpo de texto está a 12:1 y las etiquetas secundarias a 7:1.
Bloques de código navegables con teclado
Los extractos de informe se desplazan horizontalmente en el móvil: pueden recibir el foco y se anuncian como regiones desplazables; de lo contrario, su contenido sería inalcanzable sin ratón.
Lo que se entregó.
- Inicio — prueba, promesa, versión de prueba
- Funcionamiento — el ciclo de una auditoría con agentes
- Informes — anatomía de un entregable
- Tarifas
- Documentación y motor de código abierto
El desarrollo del proyecto.
Definición
Entrevistas con el equipo de producto, definición de las objeciones que tratar y en qué orden.
Contenido
Redacción técnica validada por los ingenieros antes de cualquier maqueta.
Diseño
Sistema oscuro, componente de prueba, escala tipográfica.
Desarrollo
Next.js estático, cabeceras de seguridad, presupuesto de rendimiento.
Puesta en línea
Pruebas de seguridad, control de cabeceras, Search Console.
Lo que nos preguntan a menudo.
Otros proyectos
Cumplimiento del RGPD y SaaSKonsent by Kayzen
Un proveedor de banners que audita banners es juez y parte: la independencia era el producto.
Datos y servicio meteorológicoMétéo Climat France
358 páginas indexables, un mapa animado sobre 72 horizontes de previsión y ni una sola línea de framework.
Oficios y construcciónBTP EA Rénovation
Seis campos, ni uno más: el formulario es el producto.
El mismo nivel de exigencia, para su web.
Auditoría gratuita de su web actual, presupuesto en 24 horas y un razonamiento por escrito, como el que acaba de leer. Pago en tres plazos sin intereses; ayudas locales verificadas antes de la firma.