Extractor de Inventario de Componentes UI
Identifica todos los componentes, estados y campos de datos a partir de un boceto para evitar retrabajos posteriores.
Resumen del prompt
Consejos para ti
Normaliza los nombres desde el inicio para que diseño e ingeniería hablen el mismo idioma. | Documenta la validación donde se capturan datos para acelerar QA después. | Prefiere variantes sobre nuevos componentes para reducir la expansión del sistema de diseño. | Captura estados de accesibilidad como orden de foco y pistas ARIA.
Del equipo de operacionesNexusAi TechnologyProblema que resuelve
Componentes inesperados aparecen tarde y retrasan los plazos. Este inventario identifica elementos temprano con estados y necesidades de datos.
Matriz de Cobertura de Estados
Garantiza que cada elemento interactivo defina comportamiento en todos los estados.
Contratos de Datos
Lista campos, tipos y validación para alinear con ingeniería.
Disciplina de Variantes
Reduce la expansión agrupando variantes de forma sensata.
Ganchos de Accesibilidad
Sugiere orden de foco y pistas ARIA donde sea relevante.
Instrucciones del prompt de IA
Actúa como: Un líder de sistemas de diseño encargado de extraer un inventario de componentes a partir de un boceto UI preliminar y mapear estados y contratos de datos.
Por qué esta tarea es importante: Un inventario sólido de componentes previene duplicaciones, aclara las necesidades de ingeniería y mantiene la coherencia de los mockups.
Límites importantes:
- Separar componentes presentacionales de los basados en datos.
- Capturar todos los estados (por defecto, hover, foco, activo, deshabilitado, cargando, vacío, error).
- Definir los campos de datos mínimos y validación para cada componente ligado a datos.
Entradas del usuario:
- Descripción del boceto y cualquier etiqueta presente en el mismo.
- Fuentes de datos o APIs conocidas (si las hay).
- Restricciones de accesibilidad y localización.
Objetivos:
1) Listar componentes y categorizarlos (átomos, moléculas, organismos).
2) Definir todos los estados interactivos y transiciones.
3) Mapear campos de datos, validación y mensajes de error.
4) Señalar patrones reutilizables y sugerencias de nombres.
Flujo de análisis:
1) Analizar el boceto para identificar componentes candidatos.
2) Normalizar nombres a una convención consistente.
3) Agrupar elementos similares en un solo componente reutilizable con variantes.
4) Documentar la máquina de estados para elementos interactivos.
5) Identificar dependencias (autenticación, permisos, red).
Formato de salida requerido:
- Resumen (propósito, alcance, suposiciones)
- Tabla de componentes (Nombre, Tipo, Estados, Datos, Validación, Reutilización, Notas)
- Diagramas de estados (textuales) para componentes clave
- Riesgos y preguntas abiertas
Controles de calidad:
- Cada elemento interactivo considera al menos estados de foco y deshabilitado.
- Las reglas de validación son específicas y comprobables.
- Los campos de datos incluyen tipo y si son obligatorios/opcionales.
Lista de verificación para verificación:
- Los nombres de componentes son únicos y consistentes.
- No hay componentes duplicados que deban ser variantes.
- Todos los estados de error incluyen guía de texto.
Instrucción final: Genera un inventario ordenado y fácil de revisar, adecuado para entregar a diseño e ingeniería.
Resultado esperado
Resumen: Inventario para pantallas de incorporación y lista de proyectos; asume autenticación priorizando email. Tabla de componentes (extracto): - TextInput.Email | Átomo | estados: por defecto/foco/error | datos: email:string | validación: RFC 5322 | reutilizable: alta | notas: error en línea debajo del campo - Button.Primary | Átomo | estados: por defecto/cargando/deshabilitado | datos: n/a | validación: n/a | reutilizable: alta | notas: spinner de progreso a la izquierda - ProjectCard | Molécula | estados: por defecto/hover/vacío | datos: nombre:string, tareas:int | validación: nombre ≤ 60 caracteres | reutilizable: media | notas: insignia muestra conteo de tareas Riesgos y preguntas abiertas: - No se definió el tono de voz para los mensajes de error. - Se necesitan reglas de contraseña y políticas de localización.
Proceso de implementación
Extraer inventario en Claude
Abre Claude y pega el prompt con la descripción de tu boceto y las restricciones. Solicita una tabla de componentes, estados y campos de datos. Espera un inventario estructurado con nombres reutilizables.
9 minVerificar en ChatGPT
Pega la salida de Claude en ChatGPT y pide detectar faltantes en accesibilidad, validación y textos de error. Espera una lista refinada de estados y reglas de validación específicas.
6 minAprobar línea base
Pide a ChatGPT que genere una tabla final con IDs únicos y nombres de variantes para compartir con tu equipo antes de iniciar los mockups.
5 min
