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>
2026-04-21 20:46:00 +02:00
parent d771c21a46
commit ca07927d38
15 changed files with 1587 additions and 0 deletions
@@ -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.
@@ -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.
@@ -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.
@@ -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.
@@ -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.
@@ -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.
@@ -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.
@@ -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.
@@ -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**.
@@ -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?"*.
@@ -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.