Crea una aplicación web funcional desde cero con un solo prompt: comparación entre Codex y Claude Code
En 10 minutos obtén dos prototipos listos de la misma aplicación y elige la herramienta que lo hizo mejor
- 1.Formula la idea de la aplicación en una sola frase. Por ejemplo: «un rastreador de hábitos con calendario y barra de progreso». Anótala - enviarás el mismo prompt a ambas herramientas para una comparación justa.
Elige una idea sencilla: lista de tareas, conversor de divisas, mini-juego. Cuanto más concreto, mejor el resultado.
- 2.Instala Claude Code si aún no lo tienes. Abre la terminal y ejecuta el comando de instalación. Después de instalar, ejecuta claude en la carpeta del proyecto y autentícate desde el navegador con el enlace que aparecerá en la terminal.
Claude Code funciona en macOS, Linux y Windows (vía WSL). Necesitas Node.js versión 18+. Si el servicio no está disponible en tu región - usa VPN al momento de autenticarte.
Claude Code ↗Sobre la herramienta - 3.Crea una carpeta de proyecto vacía, abre la terminal en ella y lanza Claude Code con el comando claude. Cuando aparezca la línea de entrada interactiva, pega el prompt de abajo, sustituyendo [YOUR APP IDEA] por tu idea del paso 1.
Claude Code creará los archivos, instalará dependencias y arrancará el dev-server. Vigila la terminal - puede pedir permiso para ejecutar comandos; responde y (yes).
Claude Code ↗Sobre la herramientaPromptConstruye una aplicación web completa y funcional: [YOUR APP IDEA]. Usa React con Vite. Crea todos los componentes, estilos y lógica necesarios. La aplicación debe ejecutarse con `npm install && npm run dev` y funcionar en el navegador de inmediato. Incluye una interfaz limpia y moderna con Tailwind CSS. Asegúrate de que no haya errores.
Qué hace este promptEl prompt en español pide a Claude Code crear una aplicación web completa y funcional según tu idea con React + Vite + Tailwind CSS, para que arranque con npm install && npm run dev. Sustituye [YOUR APP IDEA] por la descripción de tu aplicación. - 4.Espera a que Claude Code termine de generar los archivos e instalar. Abre el navegador en http://localhost:5173 - comprueba si la aplicación funciona. Haz una captura del resultado y guárdala. Cierra Claude Code (Ctrl+C).
Si el dev-server no arrancó automáticamente, ejecuta npm run dev manualmente. Recuerda cuántas correcciones tuviste que hacer a mano - es un criterio de comparación.
Claude Code ↗Sobre la herramienta - 5.Ahora instala OpenAI Codex CLI. En la terminal ejecuta el comando npm install -g @openai/codex. Tras la instalación, crea una nueva carpeta vacía para el segundo prototipo, entra en ella y ejecuta codex. Autentícate con tu cuenta de OpenAI usando el enlace de la terminal.
Codex CLI requiere Node.js 18+. Para autenticarte necesitas una cuenta de OpenAI. Si el servicio no está disponible en tu región - usa VPN.
OpenAI Codex CLI ↗ - 6.En la interfaz de Codex pega EL MISMO prompt que usaste para Claude Code (del paso 3), con la misma sustitución de [YOUR APP IDEA]. Espera a que termine la generación, ejecuta npm install && npm run dev y abre http://localhost:5173.
Codex puede crear archivos de otra forma - a veces en modo «sandbox». Si te propone aplicar cambios - acepta (approve).
OpenAI Codex CLI ↗PromptConstruye una aplicación web completa y funcional: [YOUR APP IDEA]. Usa React con Vite. Crea todos los componentes, estilos y lógica necesarios. La aplicación debe ejecutarse con `npm install && npm run dev` y funcionar en el navegador de inmediato. Incluye una interfaz limpia y moderna con Tailwind CSS. Asegúrate de que no haya errores.
Qué hace este promptEl mismo prompt en español: crear una aplicación web completa y funcional con React + Vite + Tailwind CSS. Sustituye [YOUR APP IDEA] por la misma idea del paso 3 - esto es importante para una comparación justa. - 7.Compara los dos prototipos según tres criterios: 1) ¿arrancó sin correcciones manuales?, 2) ¿qué tan cuidada es la interfaz?, 3) ¿qué tan bien cumple la lógica con tu idea? Anota el ganador de cada punto - esa será tu elección de herramienta para futuros proyectos.
Guarda ambas carpetas de proyecto - pueden servirte como plantillas. Si una de las herramientas no logró arrancar la aplicación, eso también es un resultado importante de la comparación.
- suscripciónClaude CodeIncluido en la suscripción Claude Pro por $20/mes o Claude Max por $100/mes; hay límites en la cantidad de solicitudes según el plan.
- suscripciónOpenAI Codex CLIRequiere suscripción ChatGPT Plus ($20/mes) o acceso vía API con pago por uso; los límites exactos dependen del plan - consulta la página de tarifas de OpenAI.
- gratisNode.js + npmEntorno de ejecución y gestor de paquetes - gratis, se instala una vez en el ordenador.
Por qué hoy
Los servicios de IA cambian rápido - las interfaces y los límites gratuitos pueden diferir de lo descrito.