Estructura, forma y contenido · Vibe Coding SURA

Estructura

Qué ordena: roles, navegación, pantallas, permisos, estados y tareas principales.

Pregunta base: ¿cómo es la experiencia de usuario final y de administrador?

¿Qué necesita ver cada rol al entrar?
¿Qué decisión o acción debe poder completar?
¿Qué información ve el usuario y qué controla el admin?

Forma

Qué ordena: identidad visual, componentes, tono, accesibilidad y consistencia.

Concepto clave: un design system traduce marca en reglas de interfaz reutilizables.

¿Qué colores, tipografías y componentes representan a SURA?
¿Qué captura o PDF de marca podemos subir?
¿La demo se siente clara, confiable y coherente?

Contenido

Qué ordena: base de conocimiento, FAQs, reglas, datos ficticios, documentos y fuentes.

Pregunta base: ¿qué debería saber la web para responder con criterio?

¿Qué respuestas, reglas o límites debe conocer?
¿Qué datos pueden ser ficticios para la demo?
¿Qué requeriría API, MCP o backend real?

Prompt para revisar la demo

“Actúa como equipo de producto y experiencia SURA. Revisa esta demo en tres capas: estructura, forma y contenido. Para cada capa, propón 3 mejoras: una fácil, una de tiempo medio y una compleja. Explica qué valor aporta, qué riesgo reduce y qué debería pedirle a la IA en el siguiente prompt.”

Regla de decisión

Elegid lo que aumente claridad para el usuario, criterio para SURA y capacidad de mostrar valor en la demo. Si una mejora exige datos reales, credenciales o integración, describidla como evolución futura y prototipad con datos ficticios.

Capa	Cosas fáciles 10–20 min · buen siguiente prompt	Requiere algo más de tiempo 30–60 min · iteración visible	Cosas complejas roadmap · backend · integración
Estructura Experiencia por rol	“Añade menú superior, página de inicio, detalle y cierre.” “Separa vista de usuario y vista de administrador.” “Resume el recorrido en 5 pasos.”	“Diseña un dashboard admin con métricas ficticias, filtros y estados.” “Crea flujo de onboarding, diagnóstico y seguimiento.” “Define permisos por rol.”	Autenticación real, panel operativo con usuarios, workflows internos, trazabilidad de decisiones, auditoría y permisos conectados a sistemas reales.
Forma Design system	“Usa esta captura como referencia visual.” “Aplica colores, tono y estilo SURA.” “Haz botones, cards y estados más consistentes.”	“Crea una mini guía visual: colores, tipografías, botones, cards, alertas y tablas.” “Mejora responsive y accesibilidad.” “Diseña componentes reutilizables.”	Design system completo conectado al código, librería de componentes, tokens de marca, QA visual, accesibilidad formal y gobernanza de cambios.
Contenido Base de conocimiento	“Añade 10 FAQs ficticias y respuestas claras.” “Crea datos de ejemplo coherentes.” “Incluye límites y mensajes de revisión humana.”	“Organiza la base en categorías: usuario, producto, riesgo, proceso y métricas.” “Genera una tabla ficticia consultable.” “Crea un buscador simulado.”	Conectar a base real vía API o MCP, RAG, permisos por fuente, logs, actualización automática, evaluación de respuestas y backend seguro.

1 · Elegid rol

Usuario, administrador, asesor, equipo interno o cliente.

2 · Elegid capa

Estructura, forma o contenido. Una por vez funciona mejor.

3 · Elegid dificultad

Fácil para demostrar; media para mejorar; compleja para roadmap.

4 · Pedid concreto

“Devuelve cambios exactos, pantallas, datos ficticios y límites.”