feat: add questionnaire.md for fast prompt generation

Numbered-option cuestionario per template type. Agent asks 4-6 questions per tanda with 1-5 options so the user can answer '1,3,2,4' instead of writing prose. At the end agent generates the filled prompt. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-04-21 19:58:06 +02:00
parent 05c2012a9e
commit 344bdbd5e6
2 changed files with 351 additions and 1 deletions
@@ -13,10 +13,11 @@ Plantillas listas para pegar en `claude.ai/design`. Copias, rellenas los `{PLACE
 | 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** → copias la plantilla que aplica, rellenas, pegas.
+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,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?"*.