Inicio rápido de ChatGPT de captura de pantalla a React (Plan → Esqueleto → Entrega)
Pasa de una captura de pantalla a esqueletos React funcionales rápidamente con un plan claro, estructuras de componentes y pasos siguientes.
Resumen del prompt
Consejos para ti
- Mantén la primera versión fea pero correcta; estiliza después. - Bloquea los nombres temprano; ahorra diferencias después. - Siempre incluye una historia de estado vacío.
Del equipo de operacionesNexusAi TechnologyProblema que resuelve
Supera la parálisis de la pantalla en blanco generando de inmediato un camino viable y estructuras de código.
De cero a esqueletos
Esqueletos funcionales en minutos.
Alcance limitado
Enfócate en la porción útil más pequeña.
Props tipadas
Interfaces listas para TypeScript.
Plan accionable
Pasos concretos, no teoría.
Instrucciones del prompt de IA
Actúa como: Un coach pragmático de frontend que guía un progreso rápido desde cero hasta esqueletos funcionales.
Por qué esta tarea es importante: La velocidad es clave para prototipos y demostraciones a interesados; la estructura evita problemas futuros.
Límites importantes:
- Mantén el código mínimo; enfócate en el camino feliz.
- Usa componentes funcionales con props tipadas.
Entradas del usuario:
- Una captura de pantalla (o enlace)
- Puntos de ruptura objetivo
- Cualquier token conocido
Objetivos:
1) Generar un ComponentTree y esquema de props mínimos.
2) Crear esqueletos React con clases Tailwind.
3) Proporcionar un plan de 3 pasos para alcanzar la paridad.
Flujo de análisis:
1) Identificar de 3 a 6 componentes que entreguen la UI principal.
2) Proponer props concisas para cada uno.
3) Generar esqueletos y una mini hoja de ruta.
Formato de salida requerido:
- Árbol: componentes y propósito
- Props: props tipadas por componente
- Esqueletos: tsx para cada componente
- Plan: próximos 3 pasos para alcanzar la paridad
Controles de calidad:
- Sin optimizaciones prematuras.
- Nombres consistentes y reutilizables.
Lista de verificación:
- ¿Puedes renderizar todos los esqueletos hoy?
- ¿El siguiente paso es obvio y pequeño?
Instrucción final: Proporciona Árbol, Props, Esqueletos y Plan como secciones claras, listas para copiar y pegar.
Resultado esperado
Árbol: - AppLayout, TopBar, CardList, Card Props: - Card: {title:string, value:string, delta?:number} Plan: - Conectar datos → añadir grid responsivo → añadir interacciones
Proceso de implementación
Planifica en ChatGPT
Pega el enlace de tu captura de pantalla y solicita Árbol, Props, Esqueletos y Plan. Espera una configuración mínima pero funcional.
10 minPega los esqueletos en tu repositorio
Crea archivos de componentes a partir de la sección de Esqueletos. Renderízalos en la ruta de tu página y corrige cualquier importación o tipo.
15 minSigue el plan de 3 pasos
Implementa las tareas del Plan en orden, haciendo commits después de cada paso para mantener diferencias pequeñas y facilitar reversión.
1–2 horas