Descomponedor de Diseño de Capturas de Pantalla (Imagen → Plan DOM → Mapa de Componentes)
Convierte rápidamente cualquier captura de pantalla de interfaz en un mapa estructurado de componentes con secciones, jerarquía y un plan DOM preliminar listo para codificar.
Resumen del prompt
Consejos para ti
- Mantén los nombres estables entre sprints para evitar cambios innecesarios. - Captura la UI repetitiva como una prop variante desde el principio. - Confirma las affordances interactivas (hover, focus, press) con diseño. - Comienza los stubs de Storybook solo con las props necesarias para la captura.
Del equipo de operacionesNexusAi TechnologyProblema que resuelve
Acelera la parte más difícil del inicio: traducir elementos visuales en una estructura coherente de componentes y un plan de diseño sin conjeturas.
Análisis de jerarquía
Convierte elementos visuales en un árbol de componentes y regiones.
Planificación de props/estado
Define entradas limpias y superficies de eventos.
Notas de diseño responsivo
Propone patrones grid/flex según puntos de ruptura.
Registro de riesgos
Señala interacciones poco claras para confirmar temprano.
Instrucciones del prompt de IA
Actúa como: Un ingeniero frontend senior y arquitecto de sistemas UI.
Por qué esta tarea es importante: Empezar desde una captura de pantalla suele llevar a componentes improvisados, desviaciones en los nombres y retrabajo. Un mapa claro reduce la ambigüedad y acelera la codificación.
Límites importantes:
- Asume React + Tailwind o CSS Modules.
- Prefiere etiquetas HTML semánticas y roles ARIA donde sea necesario.
- No inventes características del producto más allá de lo que la captura de pantalla implica.
Entradas del usuario:
- Enlace o descripción de la captura de pantalla
- Restricciones de marca (si las hay): escala de espacios, familias tipográficas, colores primarios/secundarios
- Puntos de ruptura objetivo (por ejemplo, sm, md, lg, xl)
Objetivos:
1) Identificar regiones del diseño (encabezado, navegación, contenido principal, barras laterales, pie de página, diálogos).
2) Proponer un árbol de componentes con nombres, propósito y potencial de reutilización.
3) Esbozar props/estado, dependencias de datos y superficies de eventos.
4) Sugerir grupos de utilidades Tailwind o clases CSS para el diseño principal.
Flujo de análisis:
1) Analizar la jerarquía visual: patrones grid vs. flex, ritmo de espacios, roles tipográficos.
2) Delimitar los límites de los componentes basándose en repeticiones y puntos de interacción.
3) Definir props para variabilidad (texto, iconos, imágenes, tamaños, variantes).
4) Anotar necesidades de accesibilidad (puntos de referencia, etiquetas, orden de enfoque).
Formato de salida requerido:
- ComponentTree: lista con viñetas de componentes con anidación
- ComponentSpecs: para cada componente: propósito, props, estado, aria/roles
- LayoutPlan: estrategia grid/flex con notas de espacio, padding y puntos de ruptura
- Risks: suposiciones y áreas que requieren confirmación de interesados
Controles de calidad:
- Los nombres son consistentes y descriptivos (PascalCase para componentes).
- Evitar componentes profundamente anidados cuando un patrón slot/child es suficiente.
Lista de verificación para verificación:
- ¿Puede cada componente renderizarse independientemente en Storybook?
- ¿Son las props mínimas pero completas para reutilización?
Instrucción final: Produce ComponentTree, ComponentSpecs, LayoutPlan y Risks como secciones separadas claramente etiquetadas, listas para entregar a un programador.
Resultado esperado
ComponentTree: - AppLayout - TopBar - SideNav - ContentArea - StatsCard (x3) - DataTable LayoutPlan: - Exterior: grid-cols-[auto,1fr] con gap-6 en lg; colapsar SideNav bajo md. ComponentSpecs: - Props de StatsCard: title, value, delta, icon, variant. Risks: - Acciones en filas de tabla poco claras (iconos vs. texto).
Proceso de implementación
Bocetar el mapa de componentes en ChatGPT
Abre ChatGPT y pega el enlace de tu captura de pantalla junto con cualquier restricción de espacio o tipografía de la marca. Solicita ComponentTree, ComponentSpecs, LayoutPlan y Risks. Espera una jerarquía estructurada y un plan DOM preliminar que puedas copiar en un documento de planificación.
10 minCrear stubs en Storybook
En tu editor (por ejemplo, VS Code), genera componentes React vacíos a partir de ComponentTree y añade historias básicas en Storybook con las props de ComponentSpecs. Esto convierte el plan en marcadores de posición funcionales donde puedes insertar código.
20 minConfirmar suposiciones con el equipo
Comparte la sección Risks y el enlace de Storybook con tu PM/diseñador. Registra decisiones (por ejemplo, nombres de variantes, puntos de ruptura) directamente en las props de los componentes para fijar la interfaz antes de codificar.
15 min