From 05c2012a9ee5a478de1c81ba4387db3f7a75726f Mon Sep 17 00:00:00 2001 From: Egutierrez Date: Tue, 21 Apr 2026 19:54:14 +0200 Subject: [PATCH] =?UTF-8?q?feat:=20add=20design=5Fprompts/=20=E2=80=94=201?= =?UTF-8?q?0=20ready-to-paste=20templates?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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) --- design_prompts/INDEX.md | 22 +++++++++++++++ design_prompts/auth.md | 37 ++++++++++++++++++++++++ design_prompts/crud.md | 43 ++++++++++++++++++++++++++++ design_prompts/custom.md | 44 +++++++++++++++++++++++++++++ design_prompts/dashboard.md | 36 +++++++++++++++++++++++ design_prompts/detail.md | 36 +++++++++++++++++++++++ design_prompts/error.md | 25 ++++++++++++++++ design_prompts/handoff_integrate.md | 29 +++++++++++++++++++ design_prompts/onboarding.md | 23 +++++++++++++++ design_prompts/settings.md | 42 +++++++++++++++++++++++++++ sync_from_registry.sh | 20 ++++++++++--- 11 files changed, 353 insertions(+), 4 deletions(-) create mode 100644 design_prompts/INDEX.md create mode 100644 design_prompts/auth.md create mode 100644 design_prompts/crud.md create mode 100644 design_prompts/custom.md create mode 100644 design_prompts/dashboard.md create mode 100644 design_prompts/detail.md create mode 100644 design_prompts/error.md create mode 100644 design_prompts/handoff_integrate.md create mode 100644 design_prompts/onboarding.md create mode 100644 design_prompts/settings.md diff --git a/design_prompts/INDEX.md b/design_prompts/INDEX.md new file mode 100644 index 0000000..29864a9 --- /dev/null +++ b/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. diff --git a/design_prompts/auth.md b/design_prompts/auth.md new file mode 100644 index 0000000..22d3151 --- /dev/null +++ b/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/design_prompts/crud.md b/design_prompts/crud.md new file mode 100644 index 0000000..1c53015 --- /dev/null +++ b/design_prompts/crud.md @@ -0,0 +1,43 @@ +# CRUD + +Diseña una página de gestión de `{ENTIDAD}` usando `crudPage` 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/design_prompts/custom.md b/design_prompts/custom.md new file mode 100644 index 0000000..5022b24 --- /dev/null +++ b/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/design_prompts/dashboard.md b/design_prompts/dashboard.md new file mode 100644 index 0000000..71f9a25 --- /dev/null +++ b/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/design_prompts/detail.md b/design_prompts/detail.md new file mode 100644 index 0000000..66e32c9 --- /dev/null +++ b/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} | `
` 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/design_prompts/error.md b/design_prompts/error.md
new file mode 100644
index 0000000..6e3a39a
--- /dev/null
+++ b/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/design_prompts/handoff_integrate.md b/design_prompts/handoff_integrate.md
new file mode 100644
index 0000000..00b6ad4
--- /dev/null
+++ b/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/design_prompts/onboarding.md b/design_prompts/onboarding.md
new file mode 100644
index 0000000..682ec9e
--- /dev/null
+++ b/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/design_prompts/settings.md b/design_prompts/settings.md
new file mode 100644
index 0000000..763e92d
--- /dev/null
+++ b/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.
diff --git a/sync_from_registry.sh b/sync_from_registry.sh
index 08f43aa..e2413d6 100755
--- a/sync_from_registry.sh
+++ b/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/"