Cómo hacerlo: Diseñar en Think, Programar en Codex

Descripción general

Diseñas la aplicación en Think4Ever, desde la intención de negocio hasta el blueprint aprobado y las pantallas de interfaz de usuario. Luego OpenAI Codex la construye en tu computadora, leyendo el diseño de Think4Ever a través de MCP. Think4Ever permanece como la fuente de verdad del diseño mientras Codex escribe y prueba el código, con tu propia suscripción de OpenAI.

Esta guía sigue un ejemplo real, AppointFlow: un sistema de reserva de citas que conecta clientes con proveedores de servicios, con paneles separados para clientes, proveedores y administradores. Cubre:

• Diseñar la aplicación desde la intención y aprobar el blueprint
• Elegir un tema y generar las pantallas de interfaz de usuario
• Conectar Codex a Think4Ever
• Entregar a Codex un resumen de construcción y verificar lo que construye

El mismo enfoque funciona con Claude Code. Ver Cómo hacerlo: Diseñar en Think, Programar en Claude.

Antes de empezar

Necesitas:

• Una cuenta de Think4Ever
• Codex instalado e iniciado sesión con tu cuenta de OpenAI
• Node.js, para que Codex pueda ejecutar el puente npx que lo conecta a Think4Ever
• Una carpeta vacía en tu computadora para la aplicación

Mantén los tokens de acceso fuera de las capturas de pantalla y del control de versiones.

Paso 1: Diseñar la aplicación en Think4Ever

1. Elige Diseñar desde la intención (Design from intent). Crea un proyecto y selecciona Design from intent → Design a system. Esta ruta convierte un resultado empresarial en un diseño de sistema revisable antes de que se escriba cualquier código.

2. Describe el objetivo de negocio. Di qué debe lograr la aplicación: los usuarios, los flujos principales, las restricciones de negocio, el stack tecnológico preferido, las integraciones y cómo se ve el éxito. Adjunta especificaciones o maquetas si son relevantes. Luego haz clic en Continue.

3. Resuelve las primeras decisiones. Think4Ever marca conflictos y opciones abiertas en tu descripción, como un desajuste de stack, el ORM, el modelo de pago y los canales de notificación. Elige la opción adecuada para cada uno para que el diseño no dependa de supuestos ocultos, luego haz clic en Submit.

4. Trabaja en las rondas de Análisis de Requisitos. Cada ronda hace preguntas más específicas, por ejemplo cómo se generan los turnos de reserva, cómo funcionan los depósitos o si los clientes pueden reservar como invitados. Elige la opción correspondiente, agrega tu propia respuesta con Add new item, o marca Let AI decide solo cuando la elección realmente no importe. Haz clic en Submit Answers después de cada ronda.

5. Aprueba el blueprint. Revisa los objetivos, roles, reglas, flujos de trabajo y decisiones técnicas ensamblados. Corrige cualquier cosa incompleta o contradictoria, luego haz clic en Approve & Build. Este es el traspaso de la definición del producto al diseño generado.

6. Elige un tema. Selecciona el tema visual que mejor se adapte al producto. Haz clic en Full Demo para explorar un tema, luego en Select Theme.

7. Genera la interfaz de usuario. Inicia la construcción de la interfaz y espera a que termine. Las pantallas aparecen a medida que se completan. AppointFlow obtuvo 21 pantallas que cubren los flujos de cliente, proveedor y administrador.

8. Revisa las pantallas. Abre UI Designs y verifica la galería y la maqueta interactiva Preview Designs en todos los flujos principales. Corrige las pantallas faltantes o las decisiones de producto en Think4Ever antes de empezar a programar.

Paso 2: Conectar Codex a Think4Ever

Te conectas una vez. Después de eso, cada sesión de Codex en tu computadora puede leer tus diseños de Think4Ever.

1. En tu proyecto de Think4Ever, abre MCP & Tools → Codex.
2. Haz clic en Create token y cópialo de inmediato. Se muestra solo una vez. Administra o revoca tokens más tarde en API → Access Tokens.
3. Copia el bloque de configuración generado en tu archivo de configuración de Codex, ~/.codex/config.toml. Codex llega al servidor HTTP de Think4Ever a través del puente mcp-remote. El bloque se ve así, con tu propia dirección de servidor y token:

[mcp_servers.think4ever]
command = "npx"
args = [
  "-y", "mcp-remote",
  "https://YOUR_THINK_CELL/mcp",
  "--header", "Authorization: Bearer tf_YOUR_TOKEN"
]

4. Guarda el archivo y reinicia Codex. Las herramientas de think4ever se cargan en la nueva sesión.
5. Verifica la conexión: pídele a Codex que liste sus herramientas de think4ever, o que nombre tu proyecto activo.

Nunca guardes el token en tu repositorio.

Paso 3: Dar a Codex el resumen de construcción

1. Elige Build with Codex. En UI Designs, haz clic en Build UI. En How do you want to build it?, elige Codex. Codex construye en tu computadora con tu suscripción de OpenAI, por lo que no se usan créditos de Think4Ever.

2. Copia el resumen. El panel de Codex recapitula la conexión única (con un enlace a Open the connection guide) y muestra un resumen de construcción específico del proyecto. Haz clic en Copy the brief. El resumen nombra tu proyecto y concepto, y le dice a Codex que cargue el concepto activo, los requisitos técnicos, cada bloque de concepto y cada diseño de UI antes de escribir código. Cópialo de nuevo cada vez que cambies de proyecto o reconstruyas el concepto.

3. Abre una carpeta de proyecto vacía. En Codex, crea o selecciona una carpeta vacía y ábrela como raíz del proyecto. Codex escribe la aplicación y sus instrucciones de proyecto allí.

4. Pega el resumen y envíalo. Inicia una nueva tarea, pega todo el resumen y envíalo. Deja que Codex cargue el diseño de Think4Ever antes de crear cualquier archivo. El resumen también le dice a Codex que pregunte en lugar de adivinar cuando la especificación no sea clara, y que verifique su código con la lista de verificación de hardening de Think4Ever antes de dar el build por terminado.

Paso 4: Construir y verificar la aplicación

Codex estructura la aplicación, instala dependencias, ejecuta sus comprobaciones y compara el resultado con el diseño de Think4Ever. Aprueba cada comando solo cuando se ajuste a tu proyecto y entorno.

Cuando termine, verifica que:

• El stack tecnológico coincida con los requisitos técnicos de Think4Ever
• Cada pantalla importante de Think4Ever tenga una ruta o estado de aplicación
• Los roles, permisos, validaciones, estados de error y reglas de negocio estén aplicados en el código
• El diseño, formularios, navegación y comportamiento responsivo coincidan con los diseños de UI
• Las pruebas y el build de producción pasen exitosamente, y la aplicación inicie desde una instalación limpia

Prompts de seguimiento útiles

• "Compara la aplicación actual con cada diseño de interfaz de Think y enumera las diferencias restantes antes de modificar el código."
• "Ejecuta las pruebas y el build de producción, corrige los fallos y luego resume los comandos y resultados."
• "Recarga las definiciones de roles de Think y verifica cada ruta para detectar la falta de aplicación de permisos."

Solución de problemas

Codex no ve las herramientas de think4ever. Reinicia Codex después de modificar config.toml. Si el puente no se inicia, verifica que Node.js y npx estén instalados.

Errores de autenticación. Crea un nuevo token en Think4Ever, reemplaza el anterior en config.toml y reinicia Codex. Revoca cualquier token que haya sido expuesto.

Codex abre el diseño equivocado. Copia un nuevo resumen de construcción y verifica los IDs de proyecto y de concepto.

La aplicación se desvía del diseño. Pídele a Codex que recargue las pantallas de Think4Ever relevantes y las reglas de negocio antes de editar más código.

Referencias

• Cómo hacerlo: Diseñar en Think, Programar en Claude, el mismo flujo de trabajo con Claude Code
• Documentación de OpenAI Codex MCP