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>
This commit is contained in:
Egutierrez
@@ -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?"*.
|
||||
Reference in New Issue
Block a user