Cómo hacer apps con Claude Code (paso a paso)

¿Tienes una idea de app pero no sabes por dónde empezar a programarla? Con las herramientas de IA actuales ya no necesitas escribir cada línea de código tú solo. En Racks Academy usamos Claude Code a diario para crear webs y herramientas internas, y en este artículo te enseñamos a hacer lo mismo, paso a paso.

La respuesta corta: para hacer una app con Claude Code, describes en lenguaje natural lo que quieres, Claude planifica el trabajo, escribe el código en tu proyecto, lo prueba y tú revisas y publicas el resultado. Tú pones la idea y el criterio; Claude Code pone las manos.

¿Qué es Claude Code?

Claude Code es la herramienta de programación agéntica de Anthropic. A diferencia de un chat al que le pides un trozo de código para copiar y pegar, Claude Code lee tu proyecto, edita archivos, ejecuta comandos y se integra con tus herramientas de desarrollo. Es decir, trabaja directamente sobre tu código.

Puede crear funcionalidades, arreglar errores, escribir tests, hacer commits en git y abrir pull requests, y se puede conectar con servicios externos mediante MCP (Model Context Protocol).

¿Dónde funciona Claude Code?

Según su documentación oficial, Claude Code está disponible en varias superficies, y todas comparten el mismo motor:

• Terminal: la versión más completa, mediante línea de comandos.
• Extensiones de IDE: para VS Code (también funciona en Cursor) y un plugin para JetBrains (IntelliJ IDEA, PyCharm, WebStorm…).
• App de escritorio: para macOS y Windows, con revisión visual de cambios y varias sesiones en paralelo. Ya incluye Claude Code, así que no tienes que instalar nada más.
• Web: en claude.ai/code, sin instalación local, ideal para tareas largas o repositorios que no tienes en tu ordenador. También se puede usar desde la app móvil de Claude para iOS y Android.

¿Qué necesitas para empezar?

• Una cuenta de Claude con plan de pago (Pro, Max, Team o Enterprise) o una cuenta en la consola de desarrolladores de Anthropic. El plan gratuito de Claude no incluye Claude Code.
• Node.js 20.9 o superior, que es lo que pide Next.js actualmente.
• Git y una cuenta de GitHub para guardar tu código.
• Una cuenta en Vercel para publicar la app (tiene plan gratuito y planes de pago).
• Ganas de aprender: no hace falta ser programador experto, pero entender lo básico te ayudará muchísimo a revisar lo que hace Claude.

Paso a paso: crea tu primera app con Claude Code

Vamos a crear una app sencilla, por ejemplo una lista de tareas, y publicarla en internet.

1. Instala Claude Code

En macOS, Linux o WSL, abre la terminal y ejecuta el instalador oficial:

1curl -fsSL https://claude.ai/install.sh | bash

En Windows (PowerShell):

1irm https://claude.ai/install.ps1 | iex

Cuando termine, abre una terminal nueva y comprueba que funciona con claude --version. Si prefieres no usar la terminal, descarga la app de escritorio y entra en la pestaña Code.

2. Crea el proyecto con Next.js

Next.js es un framework de React muy usado para webs y apps. Crea el proyecto con su configuración recomendada:

1npx create-next-app@latest mi-app --yes
2cd mi-app

La configuración por defecto activa TypeScript, Tailwind CSS, ESLint y App Router, e incluye un archivo AGENTS.md pensado para guiar a los agentes de programación.

3. Abre Claude Code y genera tu CLAUDE.md

Dentro de la carpeta del proyecto, arranca Claude Code:

1claude

La primera vez te pedirá iniciar sesión. Después, ejecuta el comando /init: Claude analiza el proyecto y genera un archivo CLAUDE.md con las instrucciones básicas. Ese archivo se lee al inicio de cada sesión, así que es tu forma de darle contexto permanente.

4. Pide un plan antes de programar

Aquí está el truco que marca la diferencia. No le pidas directamente "hazme una app". Activa el modo plan pulsando Shift+Tab hasta que veas "plan mode on" y escribe algo así:

1Quiero una app de lista de tareas: añadir, marcar como hecha y borrar tareas,
2que se guarden en el navegador y con un diseño limpio y responsive.
3Revisa el proyecto y propónme un plan antes de tocar nada.

En modo plan, Claude lee y propone, pero no cambia archivos. Revisa el plan, corrige lo que no te encaje y apruébalo.

5. Deja que Claude lo construya y verifique

Una vez aprobado el plan, Claude escribirá el código. Pídele que compruebe su propio trabajo:

1Implementa el plan. Cuando acabes, ejecuta npm run build y corrige
2cualquier error que salga.

Mientras tanto, arranca el servidor de desarrollo con npm run dev y abre http://localhost:3000 para probar la app. Si algo no te gusta, díselo con detalle: "el botón de borrar es muy pequeño en móvil", mejor que "no me gusta".

6. Guarda los cambios con git y súbelos a GitHub

Cuando la app funcione, pídele a Claude que haga el commit:

1Haz commit de los cambios con un mensaje descriptivo.

Claude Code trabaja directamente con git: prepara los cambios, escribe el mensaje del commit, crea ramas y abre pull requests. Crea un repositorio en GitHub y sube tu código (Claude también puede ayudarte con esto si tienes instalada la herramienta gh).

7. Publica la app en Vercel

Tienes dos opciones:

• Desde el panel de Vercel: entra en la página de nuevo proyecto, conecta tu cuenta de GitHub, elige el repositorio y pulsa Deploy. A partir de ahí, cada push a la rama conectada genera un nuevo despliegue automáticamente.
• Desde la terminal, con la CLI de Vercel:

1npm i -g vercel
2vercel login
3vercel --prod

En unos minutos tendrás tu app publicada con una URL pública.

Buenas prácticas con Claude Code

• Mantén el CLAUDE.md corto y útil: comandos que Claude no puede adivinar, normas de estilo propias y particularidades del proyecto. Si es demasiado largo, Claude acaba ignorando parte de las instrucciones.
• Explora, planifica y luego programa: para cambios grandes o que tocan varios archivos, usa el modo plan. Para cambios pequeños (un texto, una variable), pídelo directamente.
• Dale una forma de verificar su trabajo: tests, el build o una captura de pantalla. Es lo que separa una sesión que tienes que vigilar de una que funciona sola.
• Revisa siempre los cambios antes de aceptarlos. Tú eres el responsable de lo que se publica.
• Usa git a menudo: haz commits pequeños y frecuentes. Claude Code tiene puntos de control para deshacer (Esc dos veces o /rewind), pero no sustituyen a git.
• Sé concreto: menciona archivos con @, pega capturas de pantalla o mensajes de error y explica qué significa "arreglado".
• Limpia el contexto: usa /clear entre tareas que no tienen nada que ver.

Errores habituales al hacer apps con Claude Code

• La sesión cajón de sastre: empezar con una tarea, saltar a otra y volver a la primera. El contexto se llena de información irrelevante. Solución: /clear entre tareas.
• Corregir una y otra vez: si has corregido lo mismo dos veces y sigue mal, empieza una sesión limpia con un prompt mejor que incluya lo aprendido.
• Confiar sin verificar: el código puede parecer correcto y fallar en casos límite. Si no lo puedes comprobar, no lo publiques.
• Investigaciones sin límites: pedir "investiga esto" sin acotar hace que Claude lea cientos de archivos. Define bien el alcance.
• Pedir todo de golpe: una app entera en un solo mensaje suele salir peor que construirla por partes.

¿Para quién es Claude Code?

• Emprendedores y profesionales sin perfil técnico que quieren crear prototipos, webs o herramientas internas sin depender de un equipo de desarrollo para todo.
• Programadores que quieren delegar tareas repetitivas (tests, errores de lint, actualizar dependencias) y centrarse en lo importante.
• Equipos y agencias que quieren automatizar revisiones de código, trabajar con varias sesiones en paralelo o integrar Claude en GitHub Actions y Slack.

Eso sí: cuanto más entiendas de programación, mejor podrás dirigir y revisar lo que hace Claude.

Conclusión

Claude Code ha cambiado la forma de crear software: pasas de escribir código a dirigir a un agente que lo escribe por ti. Con un buen CLAUDE.md, el hábito de pedir un plan, verificar los resultados y usar git, puedes llevar una idea a una app publicada en Vercel en mucho menos tiempo del que imaginas.

Si quieres aprender a crear apps y automatizaciones con Claude Code y otras herramientas de IA, en Racks Academy te acompañamos paso a paso.