fn_registry/frontend/design_prompts/questionnaire.md

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?".