From 344bdbd5e6d78b4a56f6099db582cd47229d738e Mon Sep 17 00:00:00 2001 From: Egutierrez Date: Tue, 21 Apr 2026 19:58:06 +0200 Subject: [PATCH] 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) --- design_prompts/INDEX.md | 3 +- design_prompts/questionnaire.md | 349 ++++++++++++++++++++++++++++++++ 2 files changed, 351 insertions(+), 1 deletion(-) create mode 100644 design_prompts/questionnaire.md diff --git a/design_prompts/INDEX.md b/design_prompts/INDEX.md index 29864a9..c2b246a 100644 --- a/design_prompts/INDEX.md +++ b/design_prompts/INDEX.md @@ -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. diff --git a/design_prompts/questionnaire.md b/design_prompts/questionnaire.md new file mode 100644 index 0000000..ce9dfba --- /dev/null +++ b/design_prompts/questionnaire.md @@ -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: "` 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?"*.