# Lexy Design System — Paquete de documentación

Este directorio contiene la **documentación exportada** del sistema de diseño Lexy en dos formatos:

- **Markdown** (`.md`): prompts textuales, óptimos como contexto para LLMs.
- **HTML** (`.html`): snapshots renderizados de cada página, incluyen estilos inline y son autocontenidos.

## Cómo usarlo

### Como contexto para un agente IA / vibecoding
1. Importa todo el directorio en tu proyecto (`cp -r docs-export /tu-proyecto/lexy/`).
2. Apunta tu agente a [`AGENTS.md`](./AGENTS.md). Ahí están las reglas de uso del DS.
3. Para tareas específicas, referencia el archivo concreto: `lexy/md/componentes/button.md`, `lexy/md/fundamentos/color.md`, etc.

### Manualmente
1. Abre [`index.md`](./index.md) para navegar.
2. Cada componente tiene un archivo con: descripción, cuándo usarlo, variantes, ejemplos, accesibilidad y reglas de contenido.
3. Cada fundamento incluye una tabla canónica de **Tokens** al final.

## Regenerar

```bash
npm run docs:generate          # solo .md
npm run docs:generate-html     # también .html (requiere `next dev` en :3000)
```

Los `.md` se extraen vía AST del JSX de cada page. Los `.html` se snapshottean del servidor dev y se inlinea el CSS.

## Estructura

```
docs-export/
├── README.md              ← este archivo
├── AGENTS.md              ← reglas operativas para IA
├── index.md               ← tabla de contenidos
├── md/                    ← Prompts textuales
│   ├── home.md
│   ├── fundamentos/
│   └── componentes/
├── html/                  ← Snapshots visuales
│   ├── home.html
│   ├── fundamentos/
│   └── componentes/
└── recursos/
    └── tokens.css         ← copia de src/app/tokens.css
```