Cómo usar el sistema de diseño
Lexy DS es el repositorio vivo de decisiones visuales, patrones y componentes que usamos en producto. Esta página explica cómo está organizado, cómo leerlo y cómo extraer especificaciones listas para entregar a un asistente de IA o a un desarrollador.
Qué es Lexy DS
Una fuente única de verdad
Cada página documenta un fundamento (tipografía, color, iconografía...) o un componente del producto, con su demo en vivo, su snippet de código y las reglas de uso. Si algo está acá, así se aplica. Si no está, todavía no es parte del sistema.
Pensado para dos audiencias
Diseño, producto y QA usan estas páginas como referencia de comportamiento. Desarrollo las usa como contrato: tokens, estados, tamaños y props vienen exactamente de acá.
Estructura del sitio
La barra lateral agrupa el contenido en dos bloques. Esta página vive fuera de los grupos porque es el punto de entrada.
Esta misma página. Explica cómo está armado el sitio y cómo usar las herramientas de exportación.
Principios, tipografía, color, elevación, iconografía, layout, movimiento y formas. Lo que define el lenguaje visual antes de cualquier componente.
Cada componente disponible en el stack actual con demos interactivas, anatomía, estados y reglas de uso.
Anatomía de una página
Todas las páginas de fundamento y componente siguen la misma estructura, de arriba hacia abajo. Esto hace que escanear sea predecible.
Encabezado
Título grande de la página y una bajada que explica el propósito. La bajada también funciona como resumen para el asistente de IA.
Demos interactivas
Bloques CodeDemo con la pieza viva renderizada arriba y el snippet TSX abajo. El snippet es exactamente lo que se usa en producto.
Secciones de guía
Bloques GuidanceBlock con criterios de uso, do & don't, estados y reglas. Cuando hay listas específicas (tamaños, tokens, breakpoints), aparecen como SpecList.
Tabla de contenidos
En pantallas ≥ 1440 px, una columna lateral derecha sincroniza con la sección visible. Permite saltar entre bloques largos.
Botón de IA
Atajo clave
Cada página tiene un botón de IA en la esquina superior.
Ese botón contiene un prompt Markdown precargado con las especificaciones completas de la página actual: títulos, guías, tokens, snippets de código y reglas de uso. Es la forma rápida de pedirle a un asistente que aplique exactamente lo que ves.
Qué hace cada opción
- Copiar como Markdown: deja en el portapapeles la página entera convertida a .md, lista para pegar en Copilot, Claude, ChatGPT o Cursor.
- Descargar .md: guarda el mismo contenido como archivo, útil para versionar la especificación o adjuntarla a un ticket.
Cómo usarlo con un asistente
Pega el contenido como contexto y pide la implementación directamente: “Aplica las especificaciones de esta página al componente X del proyecto Y”. El prompt ya incluye los tokens, los estados y el snippet de referencia, así que el modelo no tiene que adivinar valores.
De dónde sale el prompt
De un script en scripts/generate-docs.mjs que recorre cada página, extrae los snippets de las demos y los exporta a docs-export/ más un módulo TS de prompts. Se regenera con npm run docs:generate; el botón de IA siempre refleja la última versión publicada.
Flujo recomendado
Una secuencia simple para resolver una pantalla nueva sin salirte del sistema.
Empieza por Fundamentales
Antes de elegir componente, asegúrate de que la jerarquía tipográfica, el color y el espacio respondan a los principios.
Busca el componente
Si existe en el grupo Componentes, úsalo tal cual. No reinventes variantes locales: si falta un estado, lo agregamos al sistema.
Copia la especificación con el botón de IA
Lleva el prompt al asistente con el contexto del proyecto. Pide código que respete tokens y estados de la página.
Vuelve a chequear contra los principios
Comprensión, confianza, escalabilidad y empatía con el lector. Si una pantalla no las cumple, revisa antes de mergear.
Stack y dependencias
Qué corre debajo
Next.js 15 con React 19, Tailwind para layout, Geist UI y Fluent v9 para componentes, Sonner para toasts, Material Symbols Outlined para iconografía y Geist Sans/Mono como familias tipográficas. El acento de marca es #4648d4.
Dónde están las piezas en el repo
- src/app/ — cada página de fundamento y componente como ruta de Next.js.
- src/components/ — Side nav, layout, providers, LLMsButton, helpers de docs.
- src/components/docs/ — DocsSection, GuidanceBlock, SpecList, LexyProvider.
- src/lib/prompts/ — index.ts (overrides) y generated.ts (autogenerado por el script).
- docs-export/ — Markdown publicado de cada página, listo para versionar.
- scripts/generate-docs.mjs — regenera docs-export/ y los prompts.
Contribuir
Agregar una página o variante
- Crea la ruta dentro de src/app/ siguiendo el shell estándar (page-layout, content-container, max-w-[860px], DocsSection, TableOfContents).
- Usa solo tokens y componentes que ya existen en el sistema. Si necesitas un valor nuevo, primero discútelo como token.
- Si la entrada va al sidebar, súmala al SideNav en el grupo correcto.
- Corre npm run docs:generate para refrescar docs-export/ y el prompt de IA.
- Verifica con npx tsc --noEmit antes de abrir PR.
Cuándo no agregar al sistema
Si un patrón solo sirve para una pantalla puntual, vive en esa pantalla. El sistema crece con piezas que se repiten y pueden sostener varias vistas; cualquier otra cosa ensucia el catálogo.