Burbuja, inline, spotlight, campo inline, asistente de docs, página alojada
Una etiqueta de script, inmutable y cacheada en el borde
Color, tipografía, radio, elevación, espaciado y movimiento; 66 son de color
Marca, núcleo, formularios, feedback, datos y navegación
WelcomeAI es un SaaS RAG multi-tenant independiente. Un cliente sube PDFs, archivos Word y Markdown, apunta el rastreador a un sitio o conecta un CMS, y el contenido se indexa en una base de conocimiento sobre PostgreSQL con pgvector. La indexación corre en segundo plano e informa por archivo, así que un rastreo fallido se ve en lugar de quedar en silencio.
Lo que lo hace distinto es lo que vuelve. Cada respuesta llega con los pasajes que usó y sus puntajes de similitud, así corriges el documento en lugar de adivinar el prompt. Donde ningún pasaje supera el umbral, el asistente lo dice y nombra qué sí puede responder, en lugar de inventar un parámetro.
Una sola app Next.js sirve cuatro hosts: el workspace en app.welcomeai.dev, el sitio en welcomeai.dev, el widget desde cdn.welcomeai.dev y una consola de administración. El inglés vive en la ruta base y el español bajo /es: un espejo de primera clase escrito con el mismo registro y la misma disciplina de longitud, no una pasada automática.
Meter contenido, afinar cómo se recupera, poner la respuesta en una página, y todo lo que pasa después de que una conversación termina.
PDF, Word, Markdown, un sitio rastreado o un CMS conectado. La indexación corre en segundo plano e informa por archivo, no por lote.
Troceado, umbral de puntaje y modelo de respuesta, con un Playground que muestra los pasajes exactamente como los vio el modelo.
Un runtime y una etiqueta de script: una burbuja, un panel inline, un spotlight, un campo inline, un asistente de docs y una página alojada.
Conversaciones, leads capturados, analítica y las cuotas del plan que las gobiernan, todo en el mismo workspace.
El producto resetea todos los valores por defecto del framework y usa una sola paleta. Todo lo de abajo se leyó del código fuente del producto: el bloque de tema de Tailwind v4, el barrel de componentes y las reglas de lint que rechazan una violación en la revisión de código; no se reconstruyó a partir de capturas.
#6D4AFF
El acento, y el único color primario del producto. Violet 700 (#5730F0) es su hover: el hover es un cambio de color y nada más.
#0E0A1F
La capa oscura de la marca: la landing, los widgets y toda superficie de código. Nunca aparece en el workspace.
#C6F24E
Una señal, no un color. Un elemento lima por pantalla, y solo en la capa de marketing y en los widgets.
#FAFAFB
El fondo del workspace. Las tarjetas blancas se apoyan en él; el producto no tiene gradientes ni paneles oscuros salvo el código.
#E8E7EE
La elevación en el workspace es una línea de un píxel, no una sombra. Los campos usan el #DDDCE6, apenas más oscuro.
#14131A
Tinta de títulos y cuerpo sobre superficies claras, con #6B6880 como nivel atenuado debajo. El texto nunca es transparente.
#C9A9FF
Etiquetas eyebrow solo sobre la capa ink. El sistema no lo pone sobre blanco.
Estos son los colores de WelcomeAI, impresos aquí como documentación. Nada en werun.dev sale de ellos.
El display es de 44px con tracking de −0.03em; h1 34, h2 22, h3 16, todos negativos. Los títulos de página del producto son de 24px: los tamaños de 34 y 44px pertenecen al marketing. El producto la carga con next/font, así que el sistema de diseño carga la misma familia desde Google Fonts e invita a reemplazarla por una copia licenciada.
Base de 15px con interlineado de 1.55, 13px en pequeño, 12px para placeholders y pistas: el tipo más chico del producto. El cuerpo se compone con text-wrap: pretty.
IDs, cantidades, rutas de archivo y puntajes de similitud, en cifras tabulares. También lleva el único tratamiento en mayúsculas del sistema: la etiqueta eyebrow de 11px con tracking de 0.14em.
Nombradas, no cargadas: esta página compone todas las familias de arriba con la tipografía propia de werun.dev.
El workspace es claro y silencioso. La capa ink pertenece al sitio de marketing y a los widgets, y ahí permite exactamente dos fondos: una grilla vertical de 120px con líneas de 1px al 5% de blanco, y un solo halo violeta de 420px que se desangra por una esquina. Nada más.
Un elemento lima por pantalla, y solo en la capa de marketing y en los widgets. En la landing es el botón de registro, y después la llamada a la acción del hero bajo el pliegue; nunca los dos a la vista. Un segundo elemento lima hace que el primero no signifique nada.
Nunca el valor usado solo: 12,480 / 20,000, 6.2 / 10 GB, 3 / 10. Ilimitado es ∞, no la palabra. Un número sin su techo no le dice a un cliente si tiene que preocuparse, que es la única razón por la que miró.
title= está prohibido a favor de un popover de pista, más de cinco opciones se convierten en un select con búsqueda, y cada listado es una grilla de divs cuyas celdas se editan en el lugar. Lint y tests hacen cumplir las tres, así que un botón de solo icono sin etiqueta es un build fallido y no un comentario de revisión.
Los tokens de color, tipografía, radio, elevación, espaciado y movimiento se copiaron del bloque de tema de la propia app: 135, 66 de ellos de color, 7 radios desde el chip de 6px hasta la píldora de 999px. El sistema de diseño es un diff contra el producto, no un dibujo de él.
Filas de navegación de 9px, tarjetas con padding de 18px, laterales de badge de 11px, texto de celda de 13.5px. Están escritos en la escala de espaciado a propósito para que una reconstrucción no los ordene en silencio sobre una grilla de 4px y cambie la densidad de cada pantalla.
Las 45 primitivas reflejan el barrel de componentes del producto. Las piezas que necesitan lógica real para ser fieles (el envoltorio de gráficos, los renderizadores de Markdown, command-K, el tour guiado y el reportero de bugs) se nombran como no reconstruidas, para que nadie suponga que se pasaron por alto.
Sin fotografía, sin biblioteca de ilustración, sin imágenes de stock, sin arte generado. Donde un concepto necesita una imagen se hace con CSS sobre elementos reales, y las capturas del producto dentro de las páginas de marketing son mocks vivos de componentes en lugar de imágenes.
