feat: add design_prompts/ — 10 ready-to-paste templates

Templates for Claude Design: onboarding, dashboard, crud, detail,
settings, auth, error, custom + handoff_integrate (for Claude Code).
sync_from_registry.sh now mirrors design_prompts/ too.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

design_prompts/INDEX.md

@@ -0,0 +1,22 @@
+# 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. |
+
+## Flujo estándar
+
+1. **Primera vez en el proyecto** → pegas `onboarding.md`.
+2. **Cada pantalla nueva** → copias la plantilla que aplica, rellenas, pegas.
+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.

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.

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.

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.

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.

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.

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.

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.

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**.

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.

sync_from_registry.sh

@@ -1,9 +1,9 @@
 #!/usr/bin/env bash
 # Sync the design system mirror from fn_registry.
 # Copies:
-#   fn_registry/frontend/functions/ui/  → components/
-#   fn_registry/frontend/DESIGN_SYSTEM.md → DESIGN_SYSTEM.md
-#   fn_registry/frontend/package.json (filtered) → package.json (not overwritten)
+#   fn_registry/frontend/functions/ui/      → components/
+#   fn_registry/frontend/DESIGN_SYSTEM.md   → DESIGN_SYSTEM.md
+#   fn_registry/frontend/design_prompts/    → design_prompts/
 #
 # Usage:
 #   ./sync_from_registry.sh                              # auto-detects when inside fn_registry/subrepos/
@@ -35,8 +35,10 @@ echo "→ Registry root: $REGISTRY_ROOT"
 
 SRC_UI="$REGISTRY_ROOT/frontend/functions/ui"
 SRC_DOC="$REGISTRY_ROOT/frontend/DESIGN_SYSTEM.md"
+SRC_PROMPTS="$REGISTRY_ROOT/frontend/design_prompts"
 DST_UI="$MIRROR_ROOT/components"
 DST_DOC="$MIRROR_ROOT/DESIGN_SYSTEM.md"
+DST_PROMPTS="$MIRROR_ROOT/design_prompts"
 
 echo "→ Syncing components from $SRC_UI"
 mkdir -p "$DST_UI"
@@ -51,7 +53,17 @@ else
   echo "WARN: $SRC_DOC not found, skipping" >&2
 fi
 
+echo "→ Syncing design_prompts/"
+if [[ -d "$SRC_PROMPTS" ]]; then
+  mkdir -p "$DST_PROMPTS"
+  find "$DST_PROMPTS" -mindepth 1 -maxdepth 1 -exec rm -rf {} +
+  cp -r "$SRC_PROMPTS"/. "$DST_PROMPTS"/
+else
+  echo "WARN: $SRC_PROMPTS not found, skipping" >&2
+fi
+
 # Counts
 n_tsx=$(find "$DST_UI" -maxdepth 1 -name "*.tsx" | wc -l | tr -d ' ')
 n_md=$(find "$DST_UI" -maxdepth 1 -name "*.md" | wc -l | tr -d ' ')
-echo "✓ Done — $n_tsx .tsx + $n_md .md in components/"
+n_prompts=$(find "$DST_PROMPTS" -maxdepth 1 -name "*.md" 2>/dev/null | wc -l | tr -d ' ')
+echo "✓ Done — $n_tsx .tsx + $n_md .md in components/ + $n_prompts .md in design_prompts/"