Prototipado de aplicaciones

¿Qué es el prototipado de aplicaciones con ChatGPT-5?

[{"selector":"#anim-1fd5a8df-fcbd-4faa-9556-f32a72ba61e2","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-ccacd59b-e490-4bc3-abcd-6f1f1c4acc01","keyframes":{"transform":["translate3d(122.18310%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-6f208a04-78f6-4d00-a3a9-60968e54735e","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-8e6f45ff-1a95-4e08-8136-c53b4c150d41","keyframes":{"transform":["translate3d(114.51104%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] Un prototipado de aplicaciones es pasar de una idea a una app funcional, yendo de "Zero-to-One." Con ChatGPT-5, implica crear la estructura base de un proyecto o scaffold transformando una idea en una app funcional a través de validar: - Ideas - Flujos - Estructuras

Tres tipos clave de scaffold:

[{"selector":"#anim-76a0d90e-259e-4499-aac3-f299a1f20793","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-fda1307d-2d55-40b0-8cad-6fb1944650ef","keyframes":{"transform":["translate3d(114.82649%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-a33e52f5-0cc8-4d76-bd01-f7b91f40a085","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-0988133b-5105-41ce-876e-b53637995a53","keyframes":{"transform":["translate3d(112.37785%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] 1. Scaffold de arquitectura de proyecto. Aquí se define la estructura técnica. Es el esqueleto en código de la app. 2. Scaffold agéntico o cognitivo. Aquí se definen la estructura de prompts y reglas que guían cómo debe pensar la IA antes de escribir código. 3. Scaffold de ejecución. Entorno donde el código se instala, se prueba y se valida.

¿Con qué hacerlo?

[{"selector":"#anim-625f4e6f-fe9e-49b0-8d3b-6eb4abbcb379","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-7130d975-879b-4900-bb6f-3e31bb62ad6c","keyframes":{"transform":["translate3d(115.55555%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-2a3c0d58-8cc7-48a6-931d-7e7992aad6d7","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-af809979-17b3-4df1-a8fb-1cec21f4d638","keyframes":{"transform":["translate3d(117.37704%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-473e5d01-75f4-4f2b-82df-6e5684dd3e0a","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-394681ae-c472-4ee4-b482-5049de05502d","keyframes":{"transform":["translate3d(115.18987%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-b353c975-b0a3-4bcd-a201-393b68ae2285","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-2b4b40d0-f93c-4b7d-ae37-e37b825d795a","keyframes":{"transform":["translate3d(122.81369%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-f3a1a5bb-696e-4d63-9513-19c6b8507ad5","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-06843268-52bf-4494-a186-56504d51af78","keyframes":{"transform":["translate3d(131.93916%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-c98cdb76-166e-4572-bf4e-e387a3f4d96f","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-13fbbaf1-c978-4ade-9460-7e4ffc0a1b16","keyframes":{"transform":["translate3d(1671.42762%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-9df137ab-16e5-4aeb-8ffd-31a217f1ea3a","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-71d9c936-55c5-461c-8a35-c61b4da58c2a","keyframes":{"transform":["translate3d(1671.42762%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] Stack recomendado para prototipado moderno: Next.js + TypeScript y Tailwind CSS Next.js : Permite crear apps con estructura clara de rutas, componentes y páginas . Tailwind : Facilita un diseño rápido, consistente y reutilizable. Ofrecen: Velocidad, claridad y escalabilidad.

Caso práctico: Panel de pedidos para un negocio.

[{"selector":"#anim-274a64a5-0726-460b-b542-3ac28669e31a","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-e6d10d2f-e99c-4d97-9c0a-c2bd419a8ffc","keyframes":{"transform":["translate3d(113.56466%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-db1a6fe8-1397-4e31-8556-951f811a3abe","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-1a6e175b-3864-47c4-ab4f-73844754b9e3","keyframes":{"transform":["translate3d(114.77986%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-4e3d1f6f-d290-497e-af84-4524d455818d","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-b6c21738-9ce4-447f-9f59-1bca12b232f2","keyframes":{"transform":["translate3d(115.23810%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] Panel de pedidos: - Visualización de catálogo. - Agregar productos al carrito. - Confirmación de pedidos. - Revisión de historial.

PASO 1: Define el objetivo.

[{"selector":"#anim-6a0601b6-8529-4cb6-834b-a02c87484d05","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-c62ef5bb-4a21-4243-87d5-048bb53ff65b","keyframes":{"transform":["translate3d(114.55696%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-ca970184-58bb-4b43-a0af-56f45f2650e1","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-9e50e2b4-bbc0-4630-9d93-1481720ece6e","keyframes":{"transform":["translate3d(114.51104%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] Por ejemplo: OBJETIVO Crear un panel de pedidos para que el usuario vea catálogo, agregue al carrito, confirme pedidos y consulte historial.

PASO 2: Establece el stack

[{"selector":"#anim-e2cdac8b-9bd4-4dbb-ac37-0086551bd831","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-36d15faa-bc4e-4b56-8d81-6189b54c8527","keyframes":{"transform":["translate3d(115.50632%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-e308f9e8-4d43-47a2-9941-fd003083be2e","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-c75747df-bcaf-444c-b9fe-350663a2e934","keyframes":{"transform":["translate3d(114.51104%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] Por ejemplo: * Plataforma: Web * Framework: Next.js (App Router) * Lenguaje : TypeScript * Estilos: Tailwind CSS * Estado: cliente, con persistencia local * Backend: datos simulados

PASO 3: Aplica la interacción invertida (Flipped interaction)

[{"selector":"#anim-6247b8d3-f1ec-4405-8af2-f462805bd475","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-7c55d933-1d85-4072-a8c6-ecb3beb8ae23","keyframes":{"transform":["translate3d(114.55696%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-74a21945-7093-4113-ab9a-04e314224be0","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-2b2f2bfe-0ae2-40cc-bf94-74a1ebacafe9","keyframes":{"transform":["translate3d(114.51104%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] Por ejemplo: Deseo construir un panel de pedidos. Antes de proponer la arquitectura del scaffold, hazme 5 preguntas críticas sobre usuarios, datos y flujos principales.

Paso 4: Solicita el scaffold completo

[{"selector":"#anim-2cdc0963-c75f-48ea-aff5-0257e237edc4","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-8a5e4786-a321-44bd-ac2d-aae6943514a0","keyframes":{"transform":["translate3d(116.29393%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-ebd3aa78-21df-4bbd-a518-968126147df5","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-b5624e30-8c87-47b6-b3d8-054516b2ab22","keyframes":{"transform":["translate3d(114.51104%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] Construye tu prompt siguiendo la estructura: 1. Define el rol 2. Pide el tipo de scaffold deseado y define el objetivo 3. Especifica el stack a utilizar 4. Define los requisitos 5. Indica el orden de entrega

Ejemplo de Pormpt:

[{"selector":"#anim-31f31474-91b0-4899-b213-81b75deae793","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-ada0fda2-cfdd-43ba-bdeb-6cd480a1d618","keyframes":{"transform":["translate3d(115.60510%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-a02eb255-d290-4d98-95f4-5363ed5ec197","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-5545bc6b-9c11-4f9a-a378-dc2f83d452b4","keyframes":{"transform":["translate3d(114.51104%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] Eres un desarrollador senior experto en desarrollo web y scaffolding. Quiero un scaffold para un prototipo web. El objetivo es crear un panel de pedidos para que un usuario pueda ver catálogo, agregar al carrito, confirmar pedido y ver historial. El stack utilizado será Next.js (App Router) + TypeScript, con Tailwind CSS y Mock API (sin backend real). Los requisitos serían: - Rutas: /login, /catalogo, /carrito, /pedidos. - Componentes: Navbar, ProductCard, CartSummary, OrderTable. - Estado: carrito en cliente con persistencia local. Entrégalo en el siguiente orden: 1. Árbol de carpetas 2. Dependencias 3. Scripts 4. Archivos clave 5. Checklist de primeros pasos

¡No pierdas más tiempo!

[{"selector":"#anim-a50ee012-8d61-4d34-b68c-d45bd377effa","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-4b71c521-e4d9-43f7-a3f5-8b325d5c1d5c","keyframes":{"transform":["translate3d(115.55555%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] Da clic aquí para acceder directamente:

Prototipado de aplicaciones

SESIÓN 6

Flashcards de estudio

ChatGPT