# Lexy Kit — construir prototipos en HTML con el Design System

Este kit es el Lexy Design System en **HTML plano**: los mismos componentes y
blocks que en React, sin React ni Radix. Permite a un agente construir prototipos
low-fi con el look real de Lexy, igual que con el registry construye en React.

> **Artefacto derivado del registry — no se edita a mano.** Para cambiar un
> componente se cambia la fuente (`registry/`) y se regenera.

## Cómo construir un prototipo

1. Crea un `.html` y enlaza el tema (y el runtime si usas overlays):
   ```html
   <link rel="stylesheet" href="kit.css" />
   <script src="kit.js" defer></script>
   ```
   Ajusta las rutas a la ubicación del kit.
2. Descubre el inventario en `manifest.json`: componentes y blocks con su
   descripción, estados (`specimens`) y, si aplica, tipo de overlay (`interactive`).
3. Toma el markup:
   - **Componentes** → `components/<nombre>.html`. Cada estado vive dentro de un
     lienzo `<div class="… p-6">`; copia el elemento interno.
   - **Blocks** (páginas compuestas: login, intake, CRM…) → `blocks/<nombre>.html`.
     Úsalos como base de pantalla completa.
4. Compón con ese markup. Las clases son Tailwind + tokens Lexy ya resueltos en
   `kit.css`: usa **tokens semánticos** (`bg-background`, `text-foreground`,
   `bg-primary`, `border-border`, `text-muted-foreground`…), nunca colores crudos.
5. **Overlays interactivos** (menús, selects, popovers, tooltips, diálogos): copia
   el bloque `<div class="kit-ix" …>…</div>` del estado *Interactivo* y carga
   `kit.js`. El toggle (click/hover, backdrop, Escape, click-fuera) es automático.

## Decisiones de diseño (no solo HTML válido)

Sigue las pautas de Lexy en `pautas/` (`pautas/arquitectura-informacion-ux.md`, `pautas/buenas-practicas.md`, `pautas/calidad-industria.md`, `pautas/diseno-cliente.md`, `pautas/diseno-crm-lexy.md`, `pautas/patrones-de-codigo.md`, `pautas/recetas-layout.md`, `pautas/sistema-visual.md`, `pautas/ux-writing.md`):
- **Define siempre el mundo**: `diseno-cliente.md` (cliente: calma, una idea por
  pantalla) vs `diseno-crm-lexy.md` (equipo/CRM: densidad jerarquizada, escaneable).
- `sistema-visual.md` — tokens, espaciado, densidad, tipografía, motion.
- `recetas-layout.md` y `arquitectura-informacion-ux.md` — composición y jerarquía.
- `ux-writing.md` — voz y microcopy. `buenas-practicas.md` — checklist y anti-patrones.

Las notas de *instalación / arquitectura React* de esas pautas no aplican al
prototipo HTML; todo lo de **diseño** sí.

## Tokens

En `kit.css` (derivados de `registry/theme/lexy-theme.css`): colores semánticos,
tipografía Geist Sans, roles de radio y spacing de layout.