From ca07927d38ddb46eb32cd2e86ea2d35fb1339e7a Mon Sep 17 00:00:00 2001
From: Egutierrez <egutierrez@dead.dd>
Date: Tue, 21 Apr 2026 20:46:00 +0200
Subject: [PATCH] feat(design-system): DESIGN_SYSTEM.md + prompts +
 extract-design command

- frontend/DESIGN_SYSTEM.md: contrato del @fn_library (regla suprema para
  Claude Design y agentes).
- frontend/design_prompts/: 11 plantillas de prompt (onboarding, dashboard,
  crud, detail, settings, auth, error, custom, handoff_integrate) +
  questionnaire numerado para arranque rapido.
- .claude/commands/extract-design.md: workflow de 10 pasos para extraer
  componentes nuevos y mejoras desde exports "standalone" de Claude Design
  al registry, sync al espejo fn-design-system y push a gitea+github.
- .claude/scripts/extract_design_bundle.py: decodificador del bundle
  (base64+gzip en manifest, nombra JSX por heuristica de header).
- .gitignore: ignorar subrepos/*/ (el mirror fn-design-system es repo
  propio con remotes dataforge/fn-design-system + gutierenmanuel/fn-design-system).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .claude/commands/extract-design.md           | 281 ++++++++++++
 .claude/scripts/extract_design_bundle.py     | 159 +++++++
 .gitignore                                   |   3 +
 frontend/DESIGN_SYSTEM.md                    | 457 +++++++++++++++++++
 frontend/design_prompts/INDEX.md             |  23 +
 frontend/design_prompts/auth.md              |  37 ++
 frontend/design_prompts/crud.md              |  43 ++
 frontend/design_prompts/custom.md            |  44 ++
 frontend/design_prompts/dashboard.md         |  36 ++
 frontend/design_prompts/detail.md            |  36 ++
 frontend/design_prompts/error.md             |  25 +
 frontend/design_prompts/handoff_integrate.md |  29 ++
 frontend/design_prompts/onboarding.md        |  23 +
 frontend/design_prompts/questionnaire.md     | 349 ++++++++++++++
 frontend/design_prompts/settings.md          |  42 ++
 15 files changed, 1587 insertions(+)
 create mode 100644 .claude/commands/extract-design.md
 create mode 100755 .claude/scripts/extract_design_bundle.py
 create mode 100644 frontend/DESIGN_SYSTEM.md
 create mode 100644 frontend/design_prompts/INDEX.md
 create mode 100644 frontend/design_prompts/auth.md
 create mode 100644 frontend/design_prompts/crud.md
 create mode 100644 frontend/design_prompts/custom.md
 create mode 100644 frontend/design_prompts/dashboard.md
 create mode 100644 frontend/design_prompts/detail.md
 create mode 100644 frontend/design_prompts/error.md
 create mode 100644 frontend/design_prompts/handoff_integrate.md
 create mode 100644 frontend/design_prompts/onboarding.md
 create mode 100644 frontend/design_prompts/questionnaire.md
 create mode 100644 frontend/design_prompts/settings.md

diff --git a/.claude/commands/extract-design.md b/.claude/commands/extract-design.md
new file mode 100644
index 00000000..91b8a63d
--- /dev/null
+++ b/.claude/commands/extract-design.md
@@ -0,0 +1,281 @@
+# /extract-design — Mejorar @fn_library con exports de Claude Design
+
+Eres un agente mejorador del design system. Tu trabajo es analizar un export "standalone" de Claude Design (`sources/frontend_designs/*.html`), identificar componentes nuevos o mejoras sobre `@fn_library`, aplicarlos al registry y propagarlos al espejo público `subrepos/fn-design-system` (GitHub + Gitea).
+
+**Objetivo:** cada diseño exportado debería dejar el registry un poco mejor que antes. Lo que Claude Design inventó para cubrir un hueco hoy → componente reutilizable del registry mañana.
+
+---
+
+## Argumento
+
+`$ARGUMENTS` — ruta al `.html` en `sources/frontend_designs/`. Si no se proporciona:
+1. Lista los `.html` bajo `sources/frontend_designs/` ordenados por fecha.
+2. Muestra fecha + nombre + tamaño.
+3. Pregunta cuál procesar. Default: el más reciente.
+
+---
+
+## PASO 0 — Validar input
+
+```bash
+ls -lht sources/frontend_designs/*.html 2>/dev/null
+```
+
+Si no existe el fichero, abortar. Si existe, leer las primeras líneas para confirmar que es un export de Claude Design (`__bundler/manifest`, `__bundler/template` en el HTML).
+
+---
+
+## PASO 1 — Decodificar el bundle
+
+Ejecutar el extractor:
+
+```bash
+python3 .claude/scripts/extract_design_bundle.py \
+  "sources/frontend_designs/<NOMBRE>.html" \
+  "sources/frontend_designs/<NOMBRE>_extracted/"
+```
+
+Esperado: directorio con `app.jsx`, `fn_library_emu.jsx`, `charts_emu.jsx`, `data.jsx` + fuentes woff2 + `manifest.json`.
+
+Si falta alguno de los 4 `.jsx` clave, inspeccionar por UUID; puede que Claude Design haya usado estructura distinta. Reportar al usuario.
+
+---
+
+## PASO 2 — Inventariar el diseño
+
+Leer `app.jsx` y listar **todos los componentes React definidos** (funciones que empiezan con mayúscula o usan `function Xxx(`). Categorizar:
+
+### 2a. Componentes del export que YA existen en `@fn_library`
+- Grep el barrel: `cat frontend/functions/ui/index.ts | grep "^export"`.
+- Para cada componente del export, ver si aparece en el barrel. Registrar coincidencias.
+
+### 2b. Componentes nuevos (no existen en el registry)
+Componentes React del `app.jsx` cuyo nombre no aparece en el barrel. Estos son **candidatos a extracción**.
+
+### 2c. Uso de variantes / props no documentadas
+Leer `fn_library_emu.jsx` del export y comparar API con tus `.tsx` reales:
+
+```bash
+# Comprobar componentes específicos si el export los usa con props nuevas
+sqlite3 registry.db "SELECT id, signature, props FROM functions WHERE id = 'alert_ts_ui';"
+```
+
+Anotar discrepancias (variantes faltantes, props nuevas, tipos distintos).
+
+### 2d. Datos/patrones reutilizables en `data.jsx`
+- RNG determinista (mulberry32) → candidato a `frontend/functions/core/rng_seeded_ts_core` o `python/functions/core/`.
+- Helpers tipo `statusBadge()` → documentar como receta, no como componente.
+
+---
+
+## PASO 3 — Consultar el registry para evitar duplicados
+
+Para cada componente candidato del paso 2b, búsqueda FTS5 antes de proponerlo:
+
+```bash
+sqlite3 registry.db "SELECT id, kind, description FROM functions WHERE id IN (SELECT id FROM functions_fts WHERE functions_fts MATCH 'name:<CANDIDATO>* OR description:<PALABRAS_CLAVE>') ORDER BY name;"
+```
+
+Si encuentras algo similar que pueda ser mejorado en lugar de duplicado, márcalo como **mejora** a ese existente.
+
+---
+
+## PASO 4 — Presentar el diagnóstico al usuario
+
+Muestra en tablas separadas:
+
+### 🟢 Componentes nuevos candidatos
+
+| # | Nombre propuesto | Dominio | Líneas | Reutilizable en | API |
+|---|---|---|---|---|---|
+| 1 | `funnel_chart_ts_ui` | ui | ~35 | CRM, analytics, funnels genéricos | `(data: Array<{stage, value}>, variant?) → JSX` |
+
+### 🟡 Mejoras a componentes existentes
+
+| # | Componente | Mejora | Tipo | Riesgo |
+|---|---|---|---|---|
+| A | `alert_ts_ui` | Añadir variantes `success`, `warning`, `info` | Expandir enum | Bajo — no rompe API |
+| B | `data_table_ts_ui` | Prop `density: 'compact'|'cozy'|'roomy'` | Añadir prop opcional | Bajo |
+
+### 🔵 Patrones a documentar (no componente)
+
+| Patrón | Dónde registrar |
+|---|---|
+| `statusBadge` helper | `DESIGN_SYSTEM.md` sección "patterns" |
+
+**Esperar confirmación.** El usuario responde con sintaxis `1,2,A,B` (o `all`, o `nuevos only`, o descarta algunos). Si dice `all`, aplica todo lo listado.
+
+---
+
+## PASO 5 — Aplicar mejoras aprobadas
+
+### 5a. Para componentes nuevos (candidatos 🟢)
+
+Por cada aprobado:
+
+1. **Leer código** del `app.jsx` / `fn_library_emu.jsx` / `charts_emu.jsx` del export.
+2. **Adaptar al stack real del registry:**
+   - Cambiar elementos SVG/HTML planos por primitivas de `@mantine/core` cuando corresponda (`Paper`, `Stack`, `Group`, `Text`).
+   - Cambiar `style={{...}}` por props Mantine (`p`, `m`, `fw`, `gap`, `radius`, `c`).
+   - Si es un chart, delegar en `@mantine/charts` cuando sea posible; solo usar SVG puro si Mantine no cubre el caso (ej: `Sparkline` en el registry ya es SVG puro por rendimiento).
+   - Iconos: `@tabler/icons-react`.
+3. **Crear los dos ficheros** siguiendo la convención:
+   - `frontend/functions/ui/<name>.tsx` — código React.
+   - `frontend/functions/ui/<name>.md` — frontmatter completo.
+4. **Frontmatter del .md** (campos clave):
+   ```yaml
+   id: <name>_ts_ui
+   name: <name>
+   kind: component
+   lang: ts
+   domain: ui
+   purity: impure
+   framework: react
+   version: 1.0.0
+   description: "..."
+   tags: [...]
+   props: {...}
+   emits: null
+   params: []
+   output: "JSX.Element — ..."
+   source_repo: "claude.ai/design"
+   source_license: ""
+   source_file: "sources/frontend_designs/<NOMBRE>.html"
+   file_path: frontend/functions/ui/<name>.tsx
+   tested: false
+   ```
+5. **Añadir al barrel** `frontend/functions/ui/index.ts`: `export { Xxx } from './<name>'`.
+
+### 5b. Para mejoras a componentes existentes (🟡)
+
+Por cada aprobada:
+
+1. **Leer** el `.tsx` actual.
+2. **Aplicar la mejora** sin romper la API existente: añade prop opcional, amplía enum de `variant`, etc.
+3. **Actualizar** el `.md` correspondiente para reflejar las nuevas variantes/props (campos `variant`, `props`, `description`).
+4. **Si la firma cambia**, actualizar también el `signature` del frontmatter.
+
+### 5c. Para patrones a documentar (🔵)
+
+1. Añadir una sección "Patterns" en `frontend/DESIGN_SYSTEM.md` si no existe.
+2. Registrar el patrón con un ejemplo corto.
+
+---
+
+## PASO 6 — Indexar y verificar
+
+```bash
+./fn index
+```
+
+- Si falla por integridad, arreglar y reintentar.
+- Verificar cada componente nuevo: `./fn show <id>`.
+- Confirmar que el barrel compila haciendo `cd frontend && pnpm tsc --noEmit` (si tarda, al menos verificar imports manualmente).
+
+---
+
+## PASO 7 — Sincronizar al espejo
+
+```bash
+cd subrepos/fn-design-system
+./sync_from_registry.sh
+git add -A
+git status --short   # Mostrar qué cambió en el espejo
+```
+
+Si hay cambios, preparar commit. Si no, el sync no recogió las modificaciones — investigar.
+
+---
+
+## PASO 8 — Commit en ambos repos
+
+### 8a. Commit en `fn_registry`
+
+```bash
+git add frontend/functions/ui/ frontend/DESIGN_SYSTEM.md registry.db
+git commit -m "$(cat <<'EOF'
+feat(ui): extract <N> components / <M> improvements from design export
+
+From: sources/frontend_designs/<NOMBRE>.html
+
+New components:
+- <id> — <descripción corta>
+- ...
+
+Improvements:
+- <id> — <cambio>
+- ...
+
+Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
+EOF
+)"
+```
+
+### 8b. Commit en el espejo
+
+```bash
+cd subrepos/fn-design-system
+git commit -m "sync: <N> new components + <M> improvements from <NOMBRE>
+
+Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>"
+```
+
+---
+
+## PASO 9 — Push
+
+### 9a. Push del espejo (ambos remotes)
+
+```bash
+cd subrepos/fn-design-system
+./push_all.sh
+```
+
+Esto propaga a:
+- `gitea/dataforge/fn-design-system`
+- `github/gutierenmanuel/fn-design-system` ← este es el que Claude Design consume
+
+### 9b. Push de fn_registry
+
+**Preguntar al usuario** antes — no push sin permiso (ver CLAUDE.md del proyecto). Si dice sí:
+
+```bash
+git push origin master
+```
+
+---
+
+## PASO 10 — Resumen final
+
+Mostrar al usuario:
+
+```
+✓ Extracción completa.
+
+Nuevos componentes en @fn_library:
+  - <id> (frontend/functions/ui/<name>.tsx)
+  - ...
+
+Mejoras aplicadas:
+  - <id>: <qué cambió>
+
+Espejo actualizado:
+  - Commit gitea:  <sha>  → <url>
+  - Commit github: <sha>  → <url>
+
+Claude Design verá estas mejoras en su próxima lectura del repo enlazado.
+Siguiente acción sugerida: probar un prompt de dashboard que use <componente_nuevo>.
+```
+
+---
+
+## Reglas críticas
+
+- **NUNCA extraer sin aprobación explícita del usuario** — siempre paso 4 con tabla y espera.
+- **NUNCA sobrescribir un componente existente** en el paso 5b — solo añadir variantes/props opcionales. Si la mejora es incompatible, proponerlo como propuesta aparte (`fn proposal add`) en vez de aplicarla.
+- **SIEMPRE `source_repo: "claude.ai/design"`** en el frontmatter de componentes nuevos, y `source_file` apuntando al `.html` original.
+- **SIEMPRE mantener el orden:** registry → index → verify → sync mirror → commit both → push mirror → (ask to push fn_registry).
+- **El barrel `index.ts`** debe estar actualizado antes de hacer `fn index` (hay apps que lo importan).
+- **NO committear** `operations.db*`, `node_modules/`, `dist/`, `.env` ni nada que `.gitignore` excluya. Usa `git add` con rutas explícitas, no `git add -A` a ciegas.
+- **Si el usuario cancela a mitad**, dejar el working tree limpio o documentar qué quedó pendiente. No medio-commits.
+- **Patrones que no tienen sentido como primitiva** (ej. envs, branding específico) → documentar, no componentizar.
diff --git a/.claude/scripts/extract_design_bundle.py b/.claude/scripts/extract_design_bundle.py
new file mode 100755
index 00000000..9e05cabe
--- /dev/null
+++ b/.claude/scripts/extract_design_bundle.py
@@ -0,0 +1,159 @@
+#!/usr/bin/env python3
+"""
+Extract Claude Design "standalone" HTML exports.
+
+Claude Design packs the whole React app as base64+gzip blobs inside
+<script type="__bundler/manifest"> tags. This script decompresses them
+and writes each asset (JSX, CSS, fonts) to a target directory.
+
+Usage:
+    python3 extract_design_bundle.py <path/to/export.html> <output_dir>
+
+The output dir will contain:
+    data.jsx              (if detected by header comment)
+    fn_library_emu.jsx    (lib emulation)
+    charts_emu.jsx        (charts emulation)
+    app.jsx               (main tree)
+    <uuid>.<ext>          (anything else — fonts, unknown js)
+    manifest.json         (summary of all assets: uuid, mime, bytes, filename)
+
+JSX files are named heuristically from their leading comment. If names
+cannot be inferred from headers, they keep their uuid prefix.
+"""
+from __future__ import annotations
+
+import base64
+import gzip
+import json
+import pathlib
+import re
+import sys
+
+
+MIME_TO_EXT = {
+    "text/javascript": "js",
+    "application/javascript": "js",
+    "text/babel": "jsx",
+    "application/json": "json",
+    "text/css": "css",
+    "image/svg+xml": "svg",
+    "font/woff2": "woff2",
+    "font/woff": "woff",
+    "text/html": "html",
+}
+
+# Order matters: first matching hint wins. Put MORE SPECIFIC patterns first.
+HEADER_HINTS = [
+    ("charts_emu.jsx",     [r"Emulaci(ó|o)n de @fn_library/\{", r"LineChart, AreaChart, BarChart"]),
+    ("fn_library_emu.jsx", [r"Emulaci(ó|o)n visual de @fn_library"]),
+    ("data.jsx",           [r"mock data \(determinista\)", r"window\.\w+Data\s*="]),
+    ("app.jsx",            [r"ReactDOM\.createRoot", r"arbol principal", r"function App\s*\("]),
+]
+
+
+def pick_name(content: str, used_names: set[str]) -> str | None:
+    head = content[:2000]
+    for name, patterns in HEADER_HINTS:
+        if name in used_names:
+            continue
+        if any(re.search(p, head, re.IGNORECASE) for p in patterns):
+            return name
+    return None
+
+
+def grab_script(html: str, kind: str) -> str | None:
+    m = re.search(
+        r'<script type="__bundler/' + kind + r'">\s*(.*?)\s*</script>',
+        html, re.DOTALL,
+    )
+    return m.group(1) if m else None
+
+
+def extract(html_path: pathlib.Path, out_dir: pathlib.Path) -> dict:
+    html = html_path.read_text(encoding="utf-8")
+
+    manifest_raw = grab_script(html, "manifest")
+    if not manifest_raw:
+        raise SystemExit(f"No <script type='__bundler/manifest'> found in {html_path}")
+    manifest = json.loads(manifest_raw)
+
+    ext_raw = grab_script(html, "ext_resources")
+    ext_resources = json.loads(ext_raw) if ext_raw else []
+    id_map = {e["uuid"]: e.get("id", e["uuid"]) for e in ext_resources}
+
+    out_dir.mkdir(parents=True, exist_ok=True)
+
+    summary = []
+    used_names: set[str] = set()
+
+    # First pass: decode all assets and collect jsx blobs (so we can name them by header hint)
+    decoded: list[tuple[str, str, bytes]] = []  # (uuid, mime, bytes)
+    for uuid, entry in manifest.items():
+        raw = base64.b64decode(entry["data"])
+        if entry.get("compressed"):
+            raw = gzip.decompress(raw)
+        decoded.append((uuid, entry.get("mime", "application/octet-stream"), raw))
+
+    # Second pass: write files with heuristic names for known jsx
+    for uuid, mime, raw in decoded:
+        ext = MIME_TO_EXT.get(mime, "bin")
+        filename = None
+
+        # Heuristic for JSX / JS that represents the app
+        if ext in ("jsx", "js"):
+            try:
+                text = raw.decode("utf-8", errors="replace")
+                name = pick_name(text, used_names)
+                if name:
+                    filename = name
+                    used_names.add(name)
+            except Exception:
+                pass
+
+        if not filename:
+            # Fall back to ext_resources id if present, or uuid
+            base = id_map.get(uuid, uuid)
+            safe = re.sub(r"[^A-Za-z0-9._-]", "_", base)[:80]
+            filename = f"{safe}.{ext}"
+
+        path = out_dir / filename
+        # Avoid collisions
+        i = 2
+        while path.exists():
+            stem = path.stem
+            path = out_dir / f"{stem}_{i}.{ext}"
+            i += 1
+        path.write_bytes(raw)
+        summary.append({
+            "uuid": uuid,
+            "mime": mime,
+            "bytes": len(raw),
+            "filename": path.name,
+        })
+
+    (out_dir / "manifest.json").write_text(
+        json.dumps({"source": str(html_path), "assets": summary}, indent=2),
+        encoding="utf-8",
+    )
+    return {"assets": summary, "out": str(out_dir)}
+
+
+def main():
+    if len(sys.argv) < 3:
+        print(__doc__)
+        sys.exit(2)
+    html = pathlib.Path(sys.argv[1])
+    out = pathlib.Path(sys.argv[2])
+    if not html.exists():
+        sys.exit(f"Input not found: {html}")
+    result = extract(html, out)
+    print(f"✓ Extracted {len(result['assets'])} assets to {result['out']}")
+    print(f"  Manifest: {out}/manifest.json")
+    print()
+    # Short preview per asset
+    for a in result["assets"]:
+        print(f"  {a['mime']:28s} {a['bytes']:>8} B  {a['filename']}")
+
+
+if __name__ == "__main__":
+    main()
diff --git a/.gitignore b/.gitignore
index 91227025..b9713322 100644
--- a/.gitignore
+++ b/.gitignore
@@ -50,6 +50,9 @@ vaults/*/
 # Sources — repos externos clonados (solo se versiona el manifest)
 sources/*/
 
+# Subrepos — mirrors/espejos externos (cada uno su propio git remote)
+subrepos/*/
+
 # External — symlinks a repos ajenos (ej: repo_Claude con skills/commands)
 external/
 
diff --git a/frontend/DESIGN_SYSTEM.md b/frontend/DESIGN_SYSTEM.md
new file mode 100644
index 00000000..84d115bf
--- /dev/null
+++ b/frontend/DESIGN_SYSTEM.md
@@ -0,0 +1,457 @@
+# @fn_library — Design System
+
+> **Fuente de verdad para Claude Design y para cualquier agente que genere UI en este repo.**
+> Si generas código frontend, obedece este documento. Sin excepciones.
+
+---
+
+## 1. Qué es esto
+
+`@fn_library` es el design system del registry. Son 75 wrappers React sobre **Mantine v9** que viven en `frontend/functions/ui/`. Toda app del registry (`apps/*/frontend/`) los consume vía el alias Vite `@fn_library` — barrel único en `frontend/functions/ui/index.ts`.
+
+**Regla suprema:** en las apps NUNCA se importa Mantine directamente, NUNCA se mezclan otras librerías de UI, NUNCA se escribe CSS manual. Todo pasa por `@fn_library`.
+
+---
+
+## 2. Stack
+
+| Capa | Librería | Notas |
+|------|----------|-------|
+| Framework | React 19 | con TypeScript 6 |
+| UI base | `@mantine/core` v9 | todos los wrappers la usan |
+| Charts | `@mantine/charts` v9 | line, bar, area, pie — Recharts por debajo |
+| Fechas | `@mantine/dates` v9 + `dayjs` | DatePickerInput |
+| Forms | `@mantine/form` v9 | validación, no es obligatorio |
+| Dropzone | `@mantine/dropzone` v9 | drag & drop de ficheros |
+| Hooks | `@mantine/hooks` v9 | disclosure, useForm, etc. |
+| Notifs | `@mantine/notifications` v9 | incluidas en FnMantineProvider |
+| Iconos | `@tabler/icons-react` v3 | el set nativo de Mantine |
+| Fuente | `@fontsource-variable/geist` | cargada en el provider |
+| Grafos | `sigma` + `graphology` | solo para `GraphContainer` |
+| Build | Vite 8 + pnpm | no webpack, no npm, no yarn |
+
+### Deny-list (NO usar nunca)
+
+- ❌ `tailwindcss`, `postcss-preset-tailwind`
+- ❌ `class-variance-authority` (CVA), `clsx`, `cn`
+- ❌ `shadcn/ui`, `@radix-ui/*` directos, `@headlessui/*`
+- ❌ `lucide-react`, `heroicons`, `feather`, `phosphor-icons`
+- ❌ `chakra-ui`, `mui`, `antd`
+- ❌ `framer-motion` (Mantine trae transiciones suficientes)
+- ❌ `styled-components`, `emotion`
+- ❌ CSS modules, CSS manual (`.css` inline), `style={{...}}` para maquetar
+
+Si una idea solo encaja con algo de la deny-list → pregunta antes de escribir código.
+
+---
+
+## 3. Import rules
+
+### 3.1 Un solo barrel
+
+```ts
+// ✅ Correcto — siempre desde el barrel
+import { Button, Card, CardHeader, CardTitle, KPICard, LineChart, DataTable } from '@fn_library'
+
+// ❌ Prohibido — subpath
+import { Button } from '@fn_library/button'
+
+// ❌ Prohibido — Mantine directo en apps
+import { Button } from '@mantine/core'
+```
+
+### 3.2 Provider raíz obligatorio
+
+Toda app monta su árbol dentro de `FnMantineProvider`. No `MantineProvider` directo.
+
+```tsx
+import { FnMantineProvider } from '@fn_library'
+import { createTheme } from '@mantine/core'
+
+const theme = createTheme({
+  primaryColor: 'indigo',
+  fontFamily: 'Geist Variable, sans-serif',
+})
+
+export function App() {
+  return (
+    <FnMantineProvider theme={theme} defaultColorScheme="dark">
+      <MyPage />
+    </FnMantineProvider>
+  )
+}
+```
+
+`FnMantineProvider` ya incluye:
+- `<Notifications position="top-right" />`
+- Los CSS de `@mantine/core`, `@mantine/charts`, `@mantine/notifications`
+- `defaultColorScheme="dark"` por defecto
+
+### 3.3 Iconos
+
+```tsx
+import { IconPlus, IconTrash, IconRefresh, IconSearch } from '@tabler/icons-react'
+
+<Button leftSection={<IconPlus size={16} />}>Añadir</Button>
+```
+
+### 3.4 Layout: solo componentes Mantine de layout
+
+Los componentes de layout (`AppShell`, `Group`, `Stack`, `Grid`, `SimpleGrid`, `Flex`, `Container`, `Box`, `Paper`) **sí** se importan directo de `@mantine/core`, porque `@fn_library` no los wrappea — son parte fija del sistema.
+
+```tsx
+import { Stack, Group, SimpleGrid, Paper, Box } from '@mantine/core'
+```
+
+El único layout wrappeado es `FnAppShell` (en `@fn_library`) — úsalo para el shell principal de la app.
+
+---
+
+## 4. Reglas duras (obedecer siempre)
+
+1. **Props Mantine, no clases.** Tamaños, márgenes, padding, gap, radio, color: `size`, `p`, `m`, `mt`, `mb`, `gap`, `radius`, `shadow`, `c`, `fw`, `fz`, `lh`. Sin `className="..."` con clases propias.
+2. **Color scheme dark** es el default del registro. Los componentes están pensados para oscuro; si quieres claro, pásalo explícito.
+3. **No hardcodees colores**. Usa los tokens Mantine (`--mantine-color-*`) o los helpers del registry (`get_series_color_ts_core`, `chart_colors_ts_core`).
+4. **Formulario**: envuelve cada campo con `<FormField label="..." error="..." helperText="...">`. Gestiona ARIA, label, error.
+5. **Tablas**: usa `DataTable`. Auto-detecta columnas del primer row. No escribas `<table>` a mano.
+6. **KPIs**: usa `KPICard` (no Paper manual). Acepta `label`, `value`, `unit`, `delta`, `icon`, `chart`, `action`, `subtitle`.
+7. **Charts**: siempre con `@fn_library` charts; nunca Recharts directo. Envuelve en `ChartContainer` si necesitas header/footer del propio chart.
+8. **Loading**: `Skeleton` + variantes (`SkeletonText`, `SkeletonCard`, `SkeletonTable`, `SkeletonAvatar`, `SkeletonButton`) o `FnLoadingOverlay` para secciones completas.
+9. **Vacío**: `EmptyState` con icono Tabler, título, descripción, acción opcional.
+10. **Errores de página entera**: `ErrorPage`. 404/500/403 o código custom.
+11. **Modal**: `Dialog`. Drawer lateral: `Sheet`. Popover flotante: `Popover`. Menús: `DropdownMenu`.
+12. **Notificaciones**: desde `@mantine/notifications` `notifications.show({...})` — el provider ya está montado. O usa el `Toast` del registry si necesitas la API `useToast`.
+
+---
+
+## 5. Catálogo completo (75 componentes)
+
+> Todos exportados desde `@fn_library` (barrel). Cada uno detalla variantes y nota clave.
+
+### 5.1 Primitives
+
+| Componente | Variantes | Notas |
+|------------|-----------|-------|
+| `Button` | `default \| outline \| secondary \| ghost \| destructive \| link` — sizes `default \| xs \| sm \| lg \| icon \| icon-xs \| icon-sm \| icon-lg` | Wrapper Mantine Button. Soporta `leftSection`/`rightSection` con icono. |
+| `FnActionIcon` | `filled \| light \| outline \| transparent \| default \| subtle` | Botón cuadrado para icono único. Loading + tooltip integrados. |
+| `Badge` | 10 semánticas (`default, secondary, destructive, outline, ghost, link, success, warning, error, info`) | 2 tamaños. |
+| `Chip` | `filled \| outline \| light` | Seleccionable. `ChipGroup` para selección simple/múltiple. |
+| `Indicator` (FnIndicator) | — | Badge posicionado sobre un hijo. |
+| `Label` | — | Etiqueta de formulario accesible. |
+| `Skeleton` | `base \| text \| card \| avatar \| button \| table` | Exporta también `SkeletonText`, `SkeletonCard`, `SkeletonTable`, `SkeletonAvatar`, `SkeletonButton`. |
+| `Sparkline` | `line \| area \| bar` | Mini chart SVG puro — para tablas y KPIs. |
+| `ProgressBar` | `primary \| success \| warning \| destructive` | Con buffer, indeterminado y display de valor. |
+| `FnRingProgress` | — | Anillo de progreso con secciones. |
+| `Tooltip` | `default` | Delay configurable. |
+| `Avatar` | `xs \| sm \| md \| lg \| xl` | Fallback a iniciales. |
+
+### 5.2 Inputs
+
+| Componente | Notas |
+|------------|-------|
+| `Input` | `TextInput` con `InputGroup` e `InputIcon`. |
+| `Textarea` | autosize. |
+| `PasswordInput` | Toggle visibilidad + strength meter opcional. |
+| `NumberInput` (FnNumberInput) | min/max, step, prefix, suffix. |
+| `Select` | Declarativo `data={[...]}`. Búsqueda, grupos. |
+| `SimpleSelect` | Acepta array plano o agrupado. |
+| `MultiSelect` | Pills + límite. |
+| `Autocomplete` | Admite valores libres (a diferencia de Select). |
+| `TagsInput` | Tags libres. |
+| `DatePickerInput` | Fecha simple, múltiple o rango. |
+| `FileInput` | Ficheros único/múltiple, tipos MIME. |
+| `Dropzone` | Drag & drop de archivos. Estados idle/accept/reject. |
+| `Checkbox` | Con indeterminate. |
+| `RadioGroup` | Opciones exclusivas. |
+| `SwitchToggle` | Label a izquierda o derecha. |
+| `FnSegmentedControl` | Selección única entre opciones. |
+| `Slider` / `RangeSlider` | Marcas, labels. |
+| `Rating` | Fracciones, símbolos custom. |
+| `ColorInput` | Picker + swatches + alpha. |
+| `PinInput` | Código OTP con autocompletado. |
+| `SearchBar` | Input con debounce, icono y clear. |
+| `Command` / `CommandSearch` | Combobox cmdk-style con búsqueda, grupos, shortcuts. |
+| `FormField` | **Wrapper obligatorio** para cada campo de form. |
+
+### 5.3 Data display
+
+| Componente | Notas |
+|------------|-------|
+| `DataTable` | Sticky header, overflow scroll, heatmap, formato condicional (number/datetime/currency), auto-columns. Variantes: `default \| heatmap`. |
+| `KPICard` | Size `sm \| default \| lg`. Acepta icon, chart inline, action. |
+| `Card` + slots | `CardHeader`, `CardTitle`, `CardDescription`, `CardAction`, `CardContent`, `CardFooter`. Variantes `default \| borderless \| ghost`, sizes `default \| sm`. |
+| `FnTimeline` | Items con iconos y colores. |
+| `EmptyState` | Icono + título + descripción + acción. |
+| `Pagination` | Autocontenido. |
+
+### 5.4 Charts
+
+| Componente | Variantes | Notas |
+|------------|-----------|-------|
+| `LineChart` | 5 curvas (`linear, monotone, step, stepBefore, stepAfter`) | Multi-series, reference lines. |
+| `BarChart` | `vertical \| horizontal` | Multi-series. |
+| `AreaChart` | `default \| stacked` | Gradientes auto. |
+| `PieChart` | `pie \| donut` | Colores auto. |
+| `Sparkline` | `line \| area \| bar` | Mini chart inline sin Recharts. |
+| `ChartContainer` | `default` | Wrapper Paper + helpers (`getSeriesColor`, `Series`). |
+| `GraphContainer` | — | sigma.js + graphology + ForceAtlas2. |
+
+### 5.5 Overlays y feedback
+
+| Componente | Notas |
+|------------|-------|
+| `Dialog` | Modal con slots (`DialogHeader`, `DialogTitle`, `DialogDescription`, `DialogContent`, `DialogFooter`, `DialogClose`). |
+| `Sheet` | Drawer `top \| bottom \| left \| right`. |
+| `Popover` | Contenido flotante. |
+| `DropdownMenu` | Items, checkboxes, radios, separadores, submenús. |
+| `Alert` | `default \| destructive`. Slots `AlertTitle`, `AlertDescription`. |
+| `Toast` | `default \| success \| error \| warning \| info`. API `useToast`. |
+| `FnLoadingOverlay` | Blur + opacidad. Para secciones o página entera. |
+
+### 5.6 Navegación y shell
+
+| Componente | Notas |
+|------------|-------|
+| `FnAppShell` | Shell con header + navbar colapsable + main. |
+| `PageHeader` | `full \| simple`. Título, subtítulo, acciones, back, tabs integrados, badge, sticky. |
+| `Breadcrumb` | Con elipsis y router links vía `asChild`. |
+| `FnNavLink` | Link con icono, descripción, anidamiento. |
+| `Tabs` | `default \| line`. Horizontal/vertical. |
+| `Accordion` | `AccordionItem` + `AccordionTrigger` + `AccordionContent`. |
+| `FnStepper` | Horizontal/vertical. |
+
+### 5.7 Hooks y providers (TS)
+
+| Hook / Provider | Fuente | Notas |
+|---|---|---|
+| `FnMantineProvider` | `@fn_library` | Provider raíz. |
+| `useToast` | `@fn_library` (toast) | API imperativa para notificaciones. |
+| `useAnimatedCanvas` | `@fn_library` | Canvas con requestAnimationFrame, DPR, FPS real. |
+| `WailsProvider` + `useWailsContext` + `useWailsCache` | `@fn_library` | Solo si la app es Wails. |
+| `useWailsQuery` / `useWailsMutation` / `useWailsStream` / `useWailsEvent` | `@fn_library` | IPC Wails. |
+
+### 5.8 Hooks TS core (registry TS core, no UI)
+
+No están en `@fn_library` pero son parte del stack. Se importan desde `frontend/functions/core/` o se copian al proyecto según se necesite:
+
+- `use_fetch`, `use_mutation`, `use_sse`, `use_websocket`, `use_infinite_scroll`, `use_debounced_search`, `use_form`
+- `api_client`, `http_cache`, `format_compact` (K/M/B, bytes, duración, Hz), `chart_colors`, `get_series_color`, `get_computed_color`
+
+---
+
+## 6. Page generators (preferir antes que montar a mano)
+
+Cuando generes una pantalla, intenta **primero** con un page generator. Solo si no encaja, compone con Card/Paper/SimpleGrid.
+
+| Generator | Cuándo usarlo | Props clave |
+|-----------|---------------|-------------|
+| `analyticsPage` | Dashboard con KPIs + charts en grid | `title, subtitle, metrics[], charts[], dateRange?, actions?` |
+| `crudPage<T>` | Listado + tabla + modal create/edit/delete | `title, columns, rows, schema, onAdd, onEdit, onDelete` |
+| `dashboardLayout` | Grid responsive 1-4 cols de widgets con span | `widgets[{content, span}]` |
+| `detailPage` | Ficha de entidad con header, campos, tabs, timeline | `entity, fields[], tabs[], timeline[]` |
+| `settingsPage` | Config con navegación lateral y secciones | `sections[{nav, fields[]}]` |
+| `AuthForm` | Login / register con social buttons | `mode, onSubmit, extraFields?, socialProviders?` |
+| `ErrorPage` | 404 / 500 / 403 / custom | `code, title, description, actions` |
+
+Estas funciones viven en `frontend/functions/ui/` igual que los componentes, se importan desde `@fn_library` y retornan un `ReactElement`.
+
+---
+
+## 7. Ejemplos canónicos
+
+### 7.1 Dashboard de analytics
+
+```tsx
+import { analyticsPage, LineChart, BarChart, AreaChart, PieChart, Button } from '@fn_library'
+import { IconRefresh } from '@tabler/icons-react'
+
+const runsData = [
+  { hour: '00', success: 120, failure: 3 },
+  { hour: '01', success: 115, failure: 1 },
+  // ...
+]
+
+export const PipelineMonitoring = () => analyticsPage({
+  title: 'Pipeline Monitoring',
+  subtitle: 'últimas 24h',
+  actions: <Button variant="outline" leftSection={<IconRefresh size={14} />}>Refresh</Button>,
+  metrics: [
+    { label: 'Runs totales', value: '1,284', delta: { value: 12, isPositive: true } },
+    { label: 'Success rate', value: '97.3%', delta: { value: 0.4, isPositive: true } },
+    { label: 'P95 latency',  value: '842ms', delta: { value: -8, isPositive: true } },
+    { label: 'Errores',      value: 34,      delta: { value: 5, isPositive: false } },
+  ],
+  charts: [
+    { id: 'runs',     title: 'Runs por hora',      type: 'line',
+      content: <LineChart data={runsData} xKey="hour"
+                 series={[{ key: 'success', name: 'Success' }, { key: 'failure', name: 'Failure' }]} /> },
+    { id: 'top',      title: 'Top pipelines',      type: 'bar',
+      content: <BarChart data={[]} xKey="name" yKey="count" /> },
+    { id: 'latency',  title: 'Latencia por etapa', type: 'area', span: 2,
+      content: <AreaChart data={[]} xKey="t" series={[{ key: 'p50' }, { key: 'p95' }]} variant="stacked" /> },
+  ],
+})
+```
+
+### 7.2 CRUD
+
+```tsx
+import { crudPage, Badge } from '@fn_library'
+import type { ColumnDef } from '@fn_library'
+
+interface Target { app: string; host: string; port: number; status: 'ok' | 'down' }
+
+const columns: ColumnDef<Target>[] = [
+  { key: 'app', label: 'App' },
+  { key: 'host', label: 'Host', render: (v) => <Badge variant="outline">{v as string}</Badge> },
+  { key: 'port', label: 'Port', format: 'number' },
+  { key: 'status', label: 'Status',
+    render: (v) => <Badge variant={v === 'ok' ? 'success' : 'destructive'}>{v as string}</Badge> },
+]
+
+export const DeployTargets = () => crudPage<Target>({
+  title: 'Deploy Targets',
+  columns,
+  rows: [],
+  schema: {
+    app:      { type: 'text',   label: 'App',      required: true },
+    host:     { type: 'select', label: 'Host',     options: ['vps-1','vps-2'] },
+    port:     { type: 'number', label: 'Port',     min: 1, max: 65535 },
+    build:    { type: 'textarea', label: 'Build cmd' },
+  },
+  onAdd: async (row) => { /* ... */ },
+  onEdit: async (row) => { /* ... */ },
+  onDelete: async (row) => { /* ... */ },
+})
+```
+
+### 7.3 Página de detalle
+
+```tsx
+import { detailPage, Badge } from '@fn_library'
+
+export const FunctionDetail = (fn) => detailPage({
+  entity: { title: fn.id, subtitle: fn.description, avatar: fn.name.slice(0,2).toUpperCase(),
+            badge: <Badge variant="secondary">{fn.domain}</Badge>, backHref: '/functions' },
+  fields: [
+    { label: 'Language',   value: fn.lang },
+    { label: 'Purity',     value: fn.purity },
+    { label: 'Kind',       value: fn.kind },
+    { label: 'Version',    value: fn.version },
+    { label: 'Tested',     value: fn.tested ? 'yes' : 'no' },
+    { label: 'Source',     value: fn.source_repo || '—' },
+  ],
+  tabs: [
+    { key: 'code',  label: 'Code',  count: 1, content: <pre>{fn.code}</pre> },
+    { key: 'tests', label: 'Tests', count: fn.tests_count },
+    { key: 'deps',  label: 'Deps',  count: fn.deps_count },
+  ],
+  timeline: fn.activity,
+})
+```
+
+---
+
+## 8. Theming
+
+Cada app define su `theme`:
+
+```tsx
+import { createTheme, type MantineThemeOverride } from '@mantine/core'
+
+export const theme: MantineThemeOverride = createTheme({
+  primaryColor: 'indigo',
+  primaryShade: { light: 6, dark: 4 },
+  fontFamily: 'Geist Variable, sans-serif',
+  headings: { fontFamily: 'Geist Variable, sans-serif', fontWeight: '600' },
+  defaultRadius: 'md',
+  // colores custom solo si son parte del brand
+  colors: {
+    brand: ['#f0f4ff','#d9e2ff','#b3c7ff','#8daaff','#668dff','#3f70ff','#3059d9','#2242b3','#13298d','#041066'],
+  },
+})
+```
+
+Y lo pasa al provider:
+
+```tsx
+<FnMantineProvider theme={theme} defaultColorScheme="dark">
+  <App />
+</FnMantineProvider>
+```
+
+**No** definas variables CSS custom, **no** toques `:root`, **no** cargues hojas de estilo adicionales. Mantine genera todas las variables (`--mantine-color-*`, `--mantine-spacing-*`, `--mantine-radius-*`) automáticamente del `theme`.
+
+---
+
+## 9. Anti-patrones (rechazar en code review)
+
+```tsx
+// ❌ className con clases custom
+<Button className="bg-blue-500 rounded-lg px-4 py-2">Click</Button>
+
+// ❌ CSS modules, Tailwind, style inline
+<div className={styles.card} />
+<div className="flex flex-col gap-4" />
+<div style={{ display: 'flex', gap: 16 }} />
+// ✅ en su lugar
+<Stack gap="md" />
+
+// ❌ Mantine directo en apps
+import { Button } from '@mantine/core'
+// ✅
+import { Button } from '@fn_library'
+
+// ❌ Iconos ajenos
+import { Plus } from 'lucide-react'
+// ✅
+import { IconPlus } from '@tabler/icons-react'
+
+// ❌ HTML nativo para formulario
+<label>Email<input type="email" /></label>
+// ✅
+<FormField label="Email"><Input type="email" /></FormField>
+
+// ❌ <table> a mano
+<table><thead>...</thead><tbody>...</tbody></table>
+// ✅
+<DataTable data={rows} columns={cols} />
+
+// ❌ Recharts directo
+import { LineChart } from 'recharts'
+// ✅
+import { LineChart } from '@fn_library'
+```
+
+---
+
+## 10. Checklist para handoffs de Claude Design
+
+Antes de integrar un export al repo, verificar:
+
+- [ ] Todos los imports UI vienen de `@fn_library` (excepto layout Mantine: `Stack`, `Group`, `SimpleGrid`, `Grid`, `Paper`, `Box`, `Container`, `Flex`, `Title`, `Text`, `AppShell`).
+- [ ] Cero imports de `lucide-react`, `shadcn`, `@radix-ui/*`, `tailwindcss`, `clsx`, `cn`, `cva`, `framer-motion`, `chakra`, `mui`, `antd`.
+- [ ] Cero `className` con clases CSS propias (solo se toleran las que el wrapper pasa al nodo raíz para forwardref).
+- [ ] Iconos únicamente `@tabler/icons-react`.
+- [ ] Charts únicamente `LineChart`/`BarChart`/`AreaChart`/`PieChart`/`Sparkline` del registry.
+- [ ] Formulario con `FormField` wrapper para cada campo.
+- [ ] Tablas con `DataTable`.
+- [ ] KPIs con `KPICard`.
+- [ ] Página entera envuelta en `FnMantineProvider` (solo el root).
+- [ ] Si aparece un componente que no existe en `@fn_library`, decidir: (a) reescribirlo con wrappers existentes, o (b) extraerlo como función nueva al registry (`frontend/functions/ui/{name}.tsx` + `.md` + `fn index`).
+
+---
+
+## 11. Metadata para Claude Design
+
+Cuando enlaces este repo en `claude.ai/design`, apunta al subdirectorio **`frontend/`** (no a la raíz del monorepo). Lo único que necesita leer para entender el sistema:
+
+```
+frontend/
+  DESIGN_SYSTEM.md           ← este documento (regla suprema)
+  package.json               ← dependencias runtime
+  functions/ui/              ← los 75 componentes con .tsx + .md
+    index.ts                 ← barrel @fn_library
+```
+
+Si aun así es demasiado, usa el **repo espejo** `fn-design-system` (generado desde este repo) que contiene exactamente esos archivos y nada más.
diff --git a/frontend/design_prompts/INDEX.md b/frontend/design_prompts/INDEX.md
new file mode 100644
index 00000000..c2b246a1
--- /dev/null
+++ b/frontend/design_prompts/INDEX.md
@@ -0,0 +1,23 @@
+# Prompts para Claude Design
+
+Plantillas listas para pegar en `claude.ai/design`. Copias, rellenas los `{PLACEHOLDERS}`, pegas. Cada una asume que el repo `fn-design-system` ya está enlazado al proyecto de Claude Design y que `DESIGN_SYSTEM.md` es la regla suprema.
+
+| # | Archivo | Cuándo usar |
+|---|---------|-------------|
+| 00 | [onboarding.md](onboarding.md) | **Primera vez** al crear un proyecto nuevo en Claude Design. Le fija las reglas. |
+| 01 | [dashboard.md](dashboard.md) | Dashboard de analytics con KPIs + charts. |
+| 02 | [crud.md](crud.md) | Gestión CRUD: lista + tabla + modal create/edit/delete. |
+| 03 | [detail.md](detail.md) | Ficha de detalle de una entidad. |
+| 04 | [settings.md](settings.md) | Página de configuración con navegación lateral. |
+| 05 | [auth.md](auth.md) | Login / register. |
+| 06 | [error.md](error.md) | 404 / 500 / 403 / custom. |
+| 07 | [custom.md](custom.md) | Pantalla libre que no encaja en ninguna plantilla. |
+| 08 | [handoff_integrate.md](handoff_integrate.md) | **Para Claude Code (yo)** — integrar un export de Claude Design al registry. |
+| 09 | [questionnaire.md](questionnaire.md) | **Guía del agente** — cuestionario numerado para rellenar plantillas rápido. |
+
+## Flujo estándar
+
+1. **Primera vez en el proyecto** → pegas `onboarding.md`.
+2. **Cada pantalla nueva** → dices al agente "quiero un prompt de dashboard / crud / ..." y el agente te lanza el **cuestionario numerado** (ver `questionnaire.md`). Respondes con `1,2,3` y él construye el prompt completo.
+3. **Cuando te guste el diseño** → "Handoff to Claude Code" en Claude Design.
+4. **De vuelta aquí** → me pegas el export + `handoff_integrate.md`, yo lo adapto al repo.
diff --git a/frontend/design_prompts/auth.md b/frontend/design_prompts/auth.md
new file mode 100644
index 00000000..22d31515
--- /dev/null
+++ b/frontend/design_prompts/auth.md
@@ -0,0 +1,37 @@
+# Login / Register
+
+Diseña una página de autenticación usando `AuthForm` del registry. Respeta `DESIGN_SYSTEM.md`.
+
+## Config
+- **Modo por defecto:** `login` / `register` / `toggle` (con switch entre ambos)
+- **Nombre de la app:** `{NOMBRE}` (aparece en el header)
+- **Logo:** {icono Tabler / SVG inline / texto}
+
+## Campos
+### Login
+- `email` · text · required
+- `password` · password_input · required + strength meter: {sí/no}
+- `remember_me` · switch_toggle · default true
+
+### Register (extra a los de login)
+- `full_name` · text · required
+- `organization` · text · optional
+- `terms` · checkbox · required · label: "Acepto los términos y condiciones"
+
+## Social buttons (opcional)
+{marca los que aplican}
+- [ ] Google (IconBrandGoogle)
+- [ ] GitHub (IconBrandGithub)
+- [ ] GitLab (IconBrandGitlab)
+- [ ] SSO corporativo (IconShieldLock, texto "Continue with SSO")
+
+## Footer
+- Link "¿Olvidaste la contraseña?" → `/forgot-password`
+- Link "¿No tienes cuenta? Regístrate" (solo en modo login)
+
+## Layout
+- Centrado vertical y horizontal en viewport.
+- Card con `variant="default"`, radius `lg`, padding `xl`, max-width `400px`.
+- Fondo: color scheme dark (por defecto) con un sutil patrón o gradiente: {describe o "sin fondo"}.
+
+Entrégalo listo para Handoff to Claude Code.
diff --git a/frontend/design_prompts/crud.md b/frontend/design_prompts/crud.md
new file mode 100644
index 00000000..1c53015f
--- /dev/null
+++ b/frontend/design_prompts/crud.md
@@ -0,0 +1,43 @@
+# CRUD
+
+Diseña una página de gestión de `{ENTIDAD}` usando `crudPage<T>` como generator raíz. Respeta `DESIGN_SYSTEM.md`.
+
+## Entidad
+TypeScript:
+```ts
+interface {Entidad} {
+  {campo1}: {tipo}
+  {campo2}: {tipo}
+  // ...
+}
+```
+
+## Columnas de la tabla
+| key | label | format / render |
+|-----|-------|-----------------|
+| {id}     | ID      | texto corto |
+| {nombre} | Nombre  | texto |
+| {status} | Status  | Badge semántico (success/destructive/warning según valor) |
+| {price}  | Precio  | format=currency |
+| {created} | Creado | format=datetime |
+
+## Acciones
+- Header: `{Add Entidad}` (button default + IconPlus)
+- Por fila (en DropdownMenu): {Edit, Delete, Ver detalle, Duplicar}
+
+## Form schema (modal create/edit)
+| field | type | label | validación |
+|-------|------|-------|------------|
+| {nombre}  | text     | Nombre      | required |
+| {categoria} | select | Categoría   | required, opciones: [...] |
+| {price}   | number   | Precio      | min 0 |
+| {notes}   | textarea | Notas       | — |
+| {active}  | toggle   | Activo      | default true |
+
+## Filtros
+Barra de filtros arriba: {lista de SearchBar / SimpleSelect / Chips / DatePickerInput}
+
+## Notas
+- {paginación / sort / bulk actions si aplican}
+
+Entrégalo listo para Handoff to Claude Code. Mock data realista.
diff --git a/frontend/design_prompts/custom.md b/frontend/design_prompts/custom.md
new file mode 100644
index 00000000..5022b244
--- /dev/null
+++ b/frontend/design_prompts/custom.md
@@ -0,0 +1,44 @@
+# Pantalla custom (sin page generator)
+
+Cuando la pantalla no encaja en ninguno de los generators (`analyticsPage`, `crudPage`, `detailPage`, `settingsPage`, `AuthForm`, `ErrorPage`), usa esta plantilla. Respeta `DESIGN_SYSTEM.md`.
+
+## Objetivo
+{Describe en 1-2 frases qué hace la pantalla y qué problema resuelve para el usuario.}
+
+## Shell
+- ¿Va dentro de `FnAppShell` (header + navbar)? → `{sí/no}`. Si sí:
+  - Header: {título app, búsqueda global, avatar menu, notificaciones}
+  - Navbar: {items principales con FnNavLink + iconos Tabler}
+- Sticky `PageHeader` con tabs: `{sí/no}`
+
+## Layout principal
+Describe la composición en términos de primitives de Mantine (`Stack`, `Group`, `SimpleGrid`, `Grid`, `Paper`, `Box`) y wrappers de `@fn_library`.
+
+Ejemplo:
+```
+Stack gap="lg"
+├── PageHeader (título + acciones)
+├── SimpleGrid cols={2}
+│   ├── Card (KpiCard list)
+│   └── Card (LineChart)
+└── DataTable
+```
+
+## Componentes requeridos (todos desde @fn_library)
+- {lista exhaustiva de componentes que debes usar — KpiCard, DataTable, Command, Dialog, etc.}
+
+## Interacciones
+- {clics, hovers, modales que se abren, estados de loading, empty states, errores}
+
+## Estados
+- **Loading:** {Skeleton variant / LoadingOverlay}
+- **Empty:** EmptyState con {icono, mensaje, acción}
+- **Error:** {Alert destructive / toast}
+
+## Datos (mock)
+{Pega o describe el shape de los datos; JSON realista de 3-5 filas si es tabla, arrays de puntos si es chart, etc.}
+
+## Restricciones
+- {lo que NO debe hacer — ej. "sin modal global, todo inline"}
+
+Entrégalo listo para Handoff to Claude Code.
diff --git a/frontend/design_prompts/dashboard.md b/frontend/design_prompts/dashboard.md
new file mode 100644
index 00000000..71f9a25b
--- /dev/null
+++ b/frontend/design_prompts/dashboard.md
@@ -0,0 +1,36 @@
+# Dashboard de analytics
+
+Diseña una página de analytics usando `analyticsPage` como generator raíz. Respeta `DESIGN_SYSTEM.md`.
+
+## Contexto
+- **Dominio:** {QUÉ MIDE — ej. monitoreo de pipelines / ventas / tráfico web}
+- **Audiencia:** {QUIÉN LO VE — ej. operador, ejecutivo}
+- **Frecuencia:** {tiempo real / cada hora / diario}
+
+## Header
+- Título: `{TÍTULO}`
+- Subtítulo: `{SUBTÍTULO — ej. "últimas 24h"}`
+- Acciones (botones a la derecha): {LISTA — ej. "Refresh" (outline + IconRefresh), "Export" (ghost + IconDownload)}
+- Date range selector: {sí / no}
+
+## KPIs (fila de KpiCards)
+Entre 2 y 6. Para cada uno:
+| label | value | unit | delta |
+|-------|-------|------|-------|
+| {Runs totales} | {1284} | — | +12% positivo |
+| {Success rate} | {97.3} | % | +0.4% positivo |
+| {P95 latency}  | {842}  | ms | -8% positivo (bajar es bueno) |
+| {Errores}      | {34}   | — | +5 negativo destructivo |
+
+## Charts
+{ENTRE 2 Y 6 charts. Para cada uno:}
+- **id** · título · tipo (`line` / `bar` / `area` / `pie`) · span (`1` o `2`) · series
+- Ej. `runs` · "Runs por hora" · `line` · span 1 · series `success` + `failure`
+- Ej. `top` · "Top pipelines" · `bar` · span 1 · series `count`
+- Ej. `latency` · "Latencia por etapa" · `area` · span 2 · stacked · series `p50` + `p95`
+- Ej. `domain` · "Distribución por dominio" · `pie` · span 1 · donut
+
+## Notas
+- {Restricciones adicionales, ej. "sin header, se embebe en otra página"}
+
+Entrégalo listo para Handoff to Claude Code. Los datos pueden ser mock realistas.
diff --git a/frontend/design_prompts/detail.md b/frontend/design_prompts/detail.md
new file mode 100644
index 00000000..66e32c9b
--- /dev/null
+++ b/frontend/design_prompts/detail.md
@@ -0,0 +1,36 @@
+# Ficha de detalle
+
+Diseña la página de detalle de `{ENTIDAD}` usando `detailPage` como generator raíz. Respeta `DESIGN_SYSTEM.md`.
+
+## Header
+- Avatar: {iniciales / imagen / icono Tabler}
+- Título: `{nombre de la entidad}`
+- Subtítulo: `{descripción breve}`
+- Badge lateral: `{dominio / status / tipo}` — variante `{secondary / success / destructive}`
+- Back button → `{ruta}`
+- Acciones (derecha): {Edit (outline), Delete (destructive), Duplicate (ghost)}
+
+## Campos (grid 2-3 columnas)
+| label | value |
+|-------|-------|
+| {ID}      | {valor} |
+| {Creado}  | {fecha formateada} |
+| {Autor}   | {texto + avatar pequeño} |
+| {Estado}  | {Badge} |
+| {Tags}    | {Chips} |
+
+## Tabs
+| key | label | count | contenido |
+|-----|-------|-------|-----------|
+| {code}  | Código       | {N} | `<pre>` con código |
+| {tests} | Tests        | {M} | DataTable de tests |
+| {deps}  | Dependencias | {K} | Lista con badges |
+| {usage} | Uso          | {J} | DataTable |
+
+## Timeline de actividad
+Lista de eventos: `{created, updated, indexed, deployed, ...}` con fecha relativa.
+
+## Notas
+- {si hay secciones custom, descríbelas aquí}
+
+Entrégalo listo para Handoff to Claude Code.
diff --git a/frontend/design_prompts/error.md b/frontend/design_prompts/error.md
new file mode 100644
index 00000000..6e3a39a0
--- /dev/null
+++ b/frontend/design_prompts/error.md
@@ -0,0 +1,25 @@
+# Página de error
+
+Diseña una página de error usando `ErrorPage` del registry. Respeta `DESIGN_SYSTEM.md`.
+
+## Config
+- **Código:** `{404 / 500 / 403 / 503 / CUSTOM}`
+- **Título:** `{ej. "Página no encontrada"}`
+- **Descripción:** `{una o dos frases — sin terminología técnica salvo que sea para devs}`
+- **Icono (opcional):** `{IconBug / IconServerOff / IconLock / ...}` de Tabler
+
+## Acciones
+{una o dos botones, la primera es la primaria}
+- `{Volver al inicio}` → `/` (default)
+- `{Contactar soporte}` → `mailto:...` (outline)
+- `{Reintentar}` → `() => window.location.reload()` (ghost)
+
+## Layout
+- Centrado vertical y horizontal.
+- Código del error: display grande (fz 80-120, fw 700, color dimmed o destructive según gravedad).
+- Debajo: título, descripción, acciones en `Group`.
+
+## Notas
+- {si hay contexto adicional — ej. incluir request-id para debugging}
+
+Entrégalo listo para Handoff to Claude Code.
diff --git a/frontend/design_prompts/handoff_integrate.md b/frontend/design_prompts/handoff_integrate.md
new file mode 100644
index 00000000..00b6ad4c
--- /dev/null
+++ b/frontend/design_prompts/handoff_integrate.md
@@ -0,0 +1,29 @@
+# Handoff Integrate — prompt para Claude Code (yo)
+
+Usa este prompt cuando tengas el export de Claude Design y quieras que lo integre al registry.
+
+---
+
+Acabo de terminar un diseño en Claude Design y te paso el export. Quiero que lo integres en `fn_registry` siguiendo `frontend/DESIGN_SYSTEM.md`.
+
+## Destino
+- **App:** `apps/{APP}/` (si no existe, dímelo y decidimos si se crea).
+- **Ruta / componente:** `{src/pages/Whatever.tsx}` o similar.
+
+## Contexto del diseño
+- **Tipo:** `{dashboard / crud / detail / settings / auth / error / custom}`
+- **Propósito:** `{1-2 frases}`
+
+## Export de Claude Design
+{pega aquí los ficheros `.tsx` que te dio el handoff. Si son varios, uno bajo cada encabezado `### path/to/file.tsx` con el código dentro de ``` ```.}
+
+## Qué necesito que hagas
+1. **Verifica** que todo lo importable de UI viene de `@fn_library` (no `@mantine/core` directo, no HTML nativo, no librerías ajenas). Si el export usa otra cosa, reescríbelo con wrappers del registry.
+2. **Valida** la deny-list: cero `tailwindcss`, `clsx`, `cn`, `cva`, `lucide-react`, `shadcn`, `@radix-ui/*`, `framer-motion`, `chakra`, `mui`, `antd`, CSS modules, className con clases propias, style inline para maquetar.
+3. **Migra** cualquier icono a `@tabler/icons-react`.
+4. **Coloca** los ficheros bajo `apps/{APP}/frontend/src/` respetando la estructura existente.
+5. Si aparece un **componente que no existe en `@fn_library` pero tiene sentido como primitiva reutilizable**, dime: propones extraerlo a `frontend/functions/ui/{nombre}.tsx` + `.md` y corremos `fn index`. No lo hagas sin confirmar.
+6. **Verifica** con `pnpm tsc --noEmit` o `pnpm build` que compila. Si no, arregla los imports.
+7. **Reporta** en tres líneas: qué integraste, qué cambiaste del export, y qué quedó pendiente.
+
+No inventes features. No añadas lógica que no estaba en el export. Integración fiel + adaptación al stack.
diff --git a/frontend/design_prompts/onboarding.md b/frontend/design_prompts/onboarding.md
new file mode 100644
index 00000000..682ec9e9
--- /dev/null
+++ b/frontend/design_prompts/onboarding.md
@@ -0,0 +1,23 @@
+# Onboarding — pegar al crear el proyecto en Claude Design
+
+Voy a usarte para diseñar UI de un sistema con design system propio llamado `@fn_library`.
+
+**Regla suprema:** lee `DESIGN_SYSTEM.md` en la raíz del repo enlazado. Es la fuente de verdad. No improvises componentes ni estilos fuera de lo que ese documento define.
+
+**Resumen de reglas duras:**
+- Stack: React 19 + Mantine v9 + `@tabler/icons-react` + `@mantine/charts`.
+- Solo importas UI desde `@fn_library` (barrel). Nunca `@mantine/core` directo en las apps.
+- Layout (`Stack`, `Group`, `SimpleGrid`, `Grid`, `Paper`, `Box`, `Container`, `AppShell`, `Title`, `Text`): **sí** desde `@mantine/core`.
+- Iconos: solo `@tabler/icons-react` (nunca `lucide-react`).
+- Prohibido: Tailwind, `cn()`, CVA, `clsx`, `className` con clases propias, `style` inline para maquetar, Recharts directo, shadcn, Radix directo, Chakra, MUI.
+- Props Mantine (`size`, `color`, `variant`, `p`, `m`, `gap`, `radius`, `shadow`, `c`, `fw`, `fz`) en vez de CSS.
+- Page generators preferidos antes de montar layouts a mano: `analyticsPage`, `crudPage`, `detailPage`, `settingsPage`, `dashboardLayout`, `AuthForm`, `ErrorPage`.
+- Root de cada app envuelto en `FnMantineProvider` con `defaultColorScheme="dark"`.
+- Color scheme por defecto: **dark**.
+
+**Antes de generar nada, confírmame que has leído `DESIGN_SYSTEM.md`** listándome:
+1. Los 7 page generators y cuándo usa cada uno.
+2. Cinco primitives que usarías para un dashboard de analytics.
+3. Los tres imports que aparecen en el root de toda app (provider + tema + estilos).
+
+Cuando te pida una pantalla, entrégamela lista para **Handoff to Claude Code**.
diff --git a/frontend/design_prompts/questionnaire.md b/frontend/design_prompts/questionnaire.md
new file mode 100644
index 00000000..ce9dfbac
--- /dev/null
+++ b/frontend/design_prompts/questionnaire.md
@@ -0,0 +1,349 @@
+# Questionnaire — arranque rápido para prompts de Claude Design
+
+Cuando el usuario pida un prompt (ej. "quiero un dashboard", "prompt para crud de clientes", "hazme una settings"), el agente **NO** le pregunta todo en abierto. Le hace el cuestionario numerado de abajo, una tanda de preguntas cada vez, con opciones `1) 2) 3) 4) 5)` para que responda rápido con los números correspondientes (`1,3,2,4` o similar).
+
+## Reglas del flujo
+
+1. **Detecta el template** que aplica (dashboard / crud / detail / settings / auth / error / custom).
+2. **Pregunta en tandas de 4-6** preguntas numeradas. No todo de golpe.
+3. Si una pregunta es **texto libre**, márcala como `(abierta)`; el usuario contesta con texto en vez de número.
+4. Si una respuesta necesita opción fuera del menú, el usuario escribe `"otra: <texto>"` y continúa.
+5. Al final de **todas** las tandas, recapitulas las respuestas en una tabla y generas el prompt de Claude Design rellenado, listo para copiar.
+6. Si el usuario responde con un número fuera de rango o ambiguo, repite la pregunta con el rango válido resaltado.
+
+### Formato de respuesta del usuario
+Puede contestar:
+- `1,2,3,1,2` — una respuesta por pregunta en el orden.
+- `1) 2  2) 3  3) 1` — explícito por número de pregunta.
+- Mezcla libre con números y texto: `1, "dashboard ventas", 3, 4, 2`.
+
+---
+
+## Template: dashboard
+
+### Tanda 1 — Contexto
+**Q1.** Tipo de dashboard:
+  1) Monitoreo técnico (latencias, errores, uptime)
+  2) Business analytics (ventas, conversiones, ingresos)
+  3) Contenido / tráfico (usuarios, pageviews, engagement)
+  4) Operacional (inventario, órdenes, tareas)
+  5) Otro *(abierta — describe)*
+
+**Q2.** Título del dashboard *(abierta)*.
+
+**Q3.** Subtítulo / contexto temporal:
+  1) "Tiempo real"
+  2) "Últimas 24h"
+  3) "Últimos 7 días"
+  4) "Último mes"
+  5) Configurable por usuario (date range picker)
+
+**Q4.** Audiencia principal:
+  1) Operador técnico
+  2) Ejecutivo / C-level
+  3) Cliente externo
+  4) Equipo interno mixto
+
+### Tanda 2 — KPIs
+**Q5.** Número de KPIs (fila superior):
+  1) 2  2) 3  3) 4  4) 5  5) 6
+
+**Q6.** Estilo de deltas:
+  1) Porcentaje con flecha (▲ +12%)
+  2) Valor absoluto (+123)
+  3) Mixto (algunos % otros absolutos)
+  4) Sin deltas
+
+**Q7.** ¿Incluyen sparkline inline el KPI?
+  1) Sí, todos los KPIs
+  2) Solo los KPIs principales (1-2)
+  3) No
+
+### Tanda 3 — Charts
+**Q8.** Número de charts:
+  1) 2  2) 3  3) 4  4) 5  5) 6
+
+**Q9.** Mix de tipos de chart:
+  1) Solo line (time-series)
+  2) line + bar (evolución + comparación)
+  3) line + bar + pie (variado)
+  4) area stacked + line (distribución + serie)
+  5) Otro *(abierta — describe la combinación)*
+
+**Q10.** ¿Hay un chart principal (span 2, full width)?
+  1) Sí, el primero
+  2) Sí, el último
+  3) Varios con span 2
+  4) Todos span 1 (grid uniforme)
+
+### Tanda 4 — Header y controles
+**Q11.** Acciones en el header:
+  1) Solo Refresh
+  2) Refresh + Export
+  3) Refresh + Date range picker
+  4) Refresh + Export + Date range picker
+  5) Ninguna
+
+**Q12.** Color scheme:
+  1) Dark (por defecto)
+  2) Light
+  3) Sigue la preferencia del sistema
+
+**Q13.** ¿Va dentro de `FnAppShell` (con header + navbar)?
+  1) Sí — especifica qué items lleva el navbar *(abierta si eliges esto)*
+  2) No — la página ocupa pantalla completa sin shell
+
+---
+
+## Template: crud
+
+### Tanda 1 — Entidad
+**Q1.** Nombre de la entidad *(abierta, PascalCase. Ej. "Customer", "DeployTarget")*.
+
+**Q2.** ¿Cuántas columnas visibles en la tabla?
+  1) 3  2) 4  3) 5  4) 6  5) 7+
+
+**Q3.** Lista las columnas *(abierta, separadas por coma)* — para cada una indica si es texto / número / fecha / badge / acción.
+
+### Tanda 2 — Acciones
+**Q4.** Acciones por fila:
+  1) Solo Edit
+  2) Edit + Delete
+  3) Edit + Delete + Duplicate
+  4) Edit + Delete + "Ver detalle"
+  5) Custom *(abierta)*
+
+**Q5.** Acciones del header:
+  1) Solo "Add"
+  2) "Add" + "Import"
+  3) "Add" + "Export"
+  4) "Add" + "Import" + "Export"
+  5) Bulk actions (select rows + apply)
+
+**Q6.** ¿Modal o página separada para create/edit?
+  1) Modal (Dialog)
+  2) Drawer lateral (Sheet)
+  3) Página completa aparte
+
+### Tanda 3 — Form
+**Q7.** Número de campos en el form *(1-5, 6-10, 11+)*:
+  1) 1-5  2) 6-10  3) 11+
+
+**Q8.** Lista los campos *(abierta — nombre + tipo cada uno)*.
+
+**Q9.** ¿Validación?
+  1) Básica (required only)
+  2) Completa (email, rangos, regex)
+  3) Async (verificar contra API)
+  4) Sin validación
+
+### Tanda 4 — Lista
+**Q10.** Filtros sobre la tabla:
+  1) Solo SearchBar global
+  2) SearchBar + SimpleSelect (por categoría)
+  3) SearchBar + Chips (tags activos)
+  4) Filtros complejos (multi-select + date range)
+  5) Sin filtros
+
+**Q11.** Paginación:
+  1) Pagination componente (numbers)
+  2) Infinite scroll
+  3) "Load more" button
+  4) Sin paginación (máximo 100 filas)
+
+**Q12.** ¿Sorting en columnas?
+  1) Sí, en todas
+  2) Solo en 2-3 principales
+  3) No
+
+---
+
+## Template: detail
+
+### Tanda 1 — Entidad
+**Q1.** Nombre de la entidad *(abierta)*.
+
+**Q2.** Avatar del header:
+  1) Iniciales generadas
+  2) Imagen (URL)
+  3) Icono Tabler *(abierta — cuál)*
+  4) Sin avatar
+
+**Q3.** Badge lateral:
+  1) Status (success/warning/destructive)
+  2) Tipo / categoría (secondary)
+  3) Ambos
+  4) Sin badge
+
+### Tanda 2 — Contenido
+**Q4.** Número de campos en el grid:
+  1) 3  2) 4-6  3) 7-10  4) 11+
+
+**Q5.** Lista los campos *(abierta — label + tipo)*.
+
+**Q6.** Número de tabs:
+  1) 1 (sin tabs)  2) 2  3) 3  4) 4  5) 5+
+
+**Q7.** Tabs *(abierta — lista de keys + labels + tipo de contenido de cada una)*.
+
+### Tanda 3 — Extras
+**Q8.** ¿Timeline de actividad?
+  1) Sí, vertical bajo los tabs
+  2) Sí, en un tab propio
+  3) Sí, en sidebar derecho
+  4) No
+
+**Q9.** Acciones del header:
+  1) Solo Edit
+  2) Edit + Delete
+  3) Edit + Delete + Duplicate
+  4) Edit + Delete + Share
+  5) Custom *(abierta)*
+
+---
+
+## Template: settings
+
+### Tanda 1 — Estructura
+**Q1.** Número de secciones (items del nav lateral):
+  1) 2-3  2) 4-5  3) 6-8  4) 9+
+
+**Q2.** Lista las secciones *(abierta — key + label + icono Tabler sugerido para cada una)*.
+
+**Q3.** Modo de guardado:
+  1) Botones "Cancelar" + "Guardar" al pie de cada sección
+  2) Autosave con toast de confirmación
+  3) Un solo "Guardar" global
+
+### Tanda 2 — Campos
+**Q4.** Tipos de campos más comunes:
+  1) Solo texto y toggles
+  2) Texto + toggle + select
+  3) Todo lo anterior + file upload (avatar, etc.)
+  4) Todo + campos complejos (2FA, sessions, API keys)
+
+**Q5.** ¿Hay sección de seguridad? (password, 2FA, sessions, api keys)
+  1) Sí  2) No
+
+**Q6.** ¿Hay sección de facturación? (plan, tarjetas, historial)
+  1) Sí  2) No
+
+---
+
+## Template: auth
+
+### Tanda 1 — Modo
+**Q1.** Modo:
+  1) Solo login
+  2) Solo register
+  3) Toggle login/register
+
+**Q2.** Nombre de la app *(abierta)* (aparece en el header).
+
+**Q3.** Logo / marca:
+  1) Icono Tabler *(abierta — cuál)*
+  2) SVG inline
+  3) Texto (nombre de la app)
+  4) Sin logo
+
+### Tanda 2 — Campos
+**Q4.** Campos en register extra a email/password:
+  1) Solo full_name
+  2) full_name + organization
+  3) full_name + organization + role
+  4) Ninguno (solo email + password)
+  5) Otro *(abierta)*
+
+**Q5.** Password strength meter:
+  1) Sí  2) No
+
+**Q6.** Remember me:
+  1) Sí  2) No
+
+### Tanda 3 — Social
+**Q7.** Proveedores OAuth *(puedes elegir varios — ej. 1,2)*:
+  1) Google
+  2) GitHub
+  3) GitLab
+  4) Microsoft
+  5) SSO corporativo
+  6) Ninguno (solo email/password)
+
+**Q8.** Terms & conditions checkbox en register:
+  1) Sí, required  2) No
+
+---
+
+## Template: error
+
+**Q1.** Código:
+  1) 404  2) 500  3) 403  4) 503  5) Custom *(abierta)*
+
+**Q2.** Tono del mensaje:
+  1) Formal y breve
+  2) Amigable / humorístico
+  3) Técnico (para devs)
+
+**Q3.** Icono Tabler:
+  1) IconBug (error genérico)
+  2) IconServerOff (backend down)
+  3) IconLock (permission denied)
+  4) IconSearchOff (not found)
+  5) Otro *(abierta)*
+
+**Q4.** Acciones:
+  1) Solo "Volver al inicio"
+  2) "Volver al inicio" + "Contactar soporte"
+  3) "Volver al inicio" + "Reintentar"
+  4) Las tres
+
+**Q5.** ¿Mostrar request-id / trace-id para debugging?
+  1) Sí  2) No
+
+---
+
+## Template: custom
+
+**Q1.** Descripción del objetivo de la pantalla *(abierta — 1-2 frases)*.
+
+**Q2.** ¿Dentro de `FnAppShell`?
+  1) Sí, con header + navbar
+  2) Sí, solo header
+  3) No, pantalla completa
+
+**Q3.** Primitivas principales (puedes marcar varias con coma):
+  1) Card + KpiCard
+  2) DataTable
+  3) Charts (line/bar/area/pie)
+  4) Command (combobox cmdk)
+  5) GraphContainer (sigma.js)
+  6) Timeline
+  7) Dropzone (upload)
+  8) Stepper
+  9) Otro *(abierta)*
+
+**Q4.** Estados a cubrir:
+  1) Loading + Empty + Error
+  2) Loading + Empty
+  3) Solo loading
+  4) Ninguno (datos siempre presentes)
+
+**Q5.** Interactividad:
+  1) Solo lectura
+  2) Formulario / edición
+  3) Drag & drop
+  4) Realtime (SSE / WebSocket)
+  5) Mix *(abierta)*
+
+**Q6.** Data mock *(abierta — pega JSON o describe)*.
+
+---
+
+## Salida final del agente
+
+Cuando el usuario haya respondido todas las tandas, el agente:
+
+1. **Recapitula** las respuestas en una tabla Markdown `| # | Pregunta | Respuesta |`.
+2. **Genera el prompt completo** de Claude Design con todos los placeholders rellenos, tomando el template correspondiente de `frontend/design_prompts/{template}.md`.
+3. **Entrega el prompt final** en un bloque de código copiable.
+4. Pregunta al final: *"¿Copio al portapapeles / abres Claude Design?"* o *"¿Ajustamos algo antes?"*.
diff --git a/frontend/design_prompts/settings.md b/frontend/design_prompts/settings.md
new file mode 100644
index 00000000..763e92d0
--- /dev/null
+++ b/frontend/design_prompts/settings.md
@@ -0,0 +1,42 @@
+# Página de configuración
+
+Diseña una página de settings usando `settingsPage` como generator raíz. Respeta `DESIGN_SYSTEM.md`.
+
+## Navegación lateral
+| key | label | icono Tabler |
+|-----|-------|--------------|
+| {general}       | General        | IconSettings |
+| {profile}       | Perfil         | IconUser |
+| {notifications} | Notificaciones | IconBell |
+| {security}      | Seguridad      | IconLock |
+| {billing}       | Facturación    | IconCreditCard |
+| {api_keys}      | API Keys       | IconKey |
+
+## Secciones (una por key de nav)
+
+### {general}
+- `{site_name}` · text · "Nombre del sitio"
+- `{timezone}` · select · opciones `[UTC, Europe/Madrid, ...]`
+- `{language}` · simple_select · `[es, en, fr]`
+
+### {profile}
+- `{full_name}` · text · required
+- `{email}` · text · required, validación email
+- `{avatar}` · file_input · image/*
+- `{bio}` · textarea · maxlength 500
+
+### {notifications}
+- `{email_alerts}` · toggle · default true
+- `{daily_digest}` · toggle · default false
+- `{quiet_hours}` · date_picker_input (range)
+
+### {security}
+- Password change (PasswordInput old + new + confirm)
+- 2FA toggle
+- Active sessions list (DataTable + "Revoke" per row)
+
+## Guardado
+- Botones al pie de cada sección: "Cancelar" (ghost) + "Guardar cambios" (default).
+- O autosave con toast de confirmación (si lo prefieres, explícalo aquí).
+
+Entrégalo listo para Handoff to Claude Code.