Guía · Parte 1 de 2

Cómo construir una app con Claude

Sin saber programar. Una guía honesta, con una app real como ejemplo.

1Antes de empezar: qué es esto y qué no

Hace unos meses no sabía construir una app web. Hoy tengo una corriendo en internet que uso todos los días: Subz, un tracker de mis suscripciones. La construí hablando con una IA. No es magia y no fue gratis — pero fue mucho más posible de lo que pensaba.

Esta guía te enseña cómo lo hice, para que tú construyas lo tuyo. No vas a clonar Subz. Subz es solo el ejemplo que voy a usar para que veas el proceso real, con sus tropiezos incluidos.

Lo que vas a lograr al terminar: una app simple, funcional, corriendo en internet con un link que puedes compartir. Sin login, sin base de datos — eso es la Parte 2. Algo del tamaño de "una herramienta que hace una cosa bien".

Lo que NO es esto:

No es un curso de programación. No vas a salir sabiendo escribir código.
No es "construye una app en 10 minutos". Es realista. Te va a tomar varias sesiones.
No es magia. La IA se equivoca, se confunde, y a veces hay que pelearse un poco. Eso es parte del proceso, no señal de que lo hiciste mal.

Honestidad brutal Si esperas apretar un botón y tener una app tan completa como Instagram, cierra esto ahora. Si estás dispuesto a sentarte unas tardes a construir algo tuyo, paso a paso, equivocándote — sigue leyendo. Lo segundo sí funciona.

Lo que vas a necesitar (y lo que cuesta de verdad)

Voy a ser directo con el dinero, porque odio las guías que te esconden el costo hasta que ya invertiste tiempo.

Las herramientas:

Claude — la IA con la que vas a trabajar. Es de Anthropic. Tiene dos caras que vas a usar para cosas distintas (ya lo explico).
VS Code — el programa donde "vive" tu app mientras la construyes. Es gratis. Piénsalo como el taller.
Claude Code — la versión de Claude que trabaja dentro de VS Code y de verdad escribe los archivos. Viene incluida en tu plan de Claude.

El costo real:

$20 USD / mes — Claude Pro

No hay versión gratis de Claude Code — el plan gratis de Claude te da el chat, pero no la herramienta que construye. Pro es el piso. (Un poco menos si pagas el año completo.)

Seamos honestos sobre el límite: Claude Pro reparte un mismo presupuesto de uso entre el chat y Claude Code, en ventanas de unas 5 horas. Si te clavas en una sesión larga de construcción, vas a topar con el límite y tendrás que esperar a que se reinicie. Es normal. No hiciste nada mal. Cuando pasa, es buena señal de tomar un descanso (de hecho, parar a tiempo es una disciplina sana, lo verás más adelante).

Si en algún momento construir se vuelve algo serio y constante, existe el plan Max ($100/mes) con mucho más margen. Pero no lo necesitas para empezar. Empieza con Pro. Sube solo si el límite te estorba de verdad.

El resto de las herramientas de esta guía (para publicar tu app en internet) son gratis en el nivel que vas a usar. Cuando lleguemos ahí te digo exactamente qué y por qué.

El truco que hace toda la diferencia: dos Claudes, no uno

Aquí está lo que casi nadie te dice y es lo que separa un proceso ordenado de un desastre. Vas a usar Claude de dos formas distintas, para dos trabajos distintos:

Para pensar

El chat normal

Como esta conversación. Aquí decides qué construir, le das vueltas a las ideas, resuelves dudas. No toca tu app. Solo piensa contigo.

Para construir

Claude Code en VS Code

Aquí se ejecuta: escribe los archivos, arma la app. No le pides que decida cosas importantes — le pides que construya lo que ya decidiste.

Si la respuesta es una decisión, va en el chat.
Si la respuesta es un archivo, va en Claude Code.

¿Por qué separarlo en vez de pedirle todo a Claude Code directamente? Tres razones, de mayor a menor importancia:

Mantienes el control y entiendes lo que pasa. Cuando piensas primero en el chat, tú tomas las decisiones y llegas a construir con un plan claro. Si le sueltas todo a Claude Code de golpe, él decide por ti y terminas con una app que no entiendes y no sabes arreglar.
Cazas errores antes de que cuesten. Es mucho más fácil corregir una idea equivocada en una conversación que desbaratar código ya escrito.
Gastas menos de tu límite mensual. Pensar y discutir en el chat consume mucho menos presupuesto que hacer que Claude Code escriba, borre y reescriba código mientras "piensa en voz alta". Llegas a construir con las ideas ya cocinadas, y Claude Code solo ejecuta. Tu plan de $20 te rinde bastante más.

Ten esta idea en la cabeza durante toda la guía. Es el hábito más importante que te llevas.

En la siguiente sección preparamos tu taller: instalamos lo necesario y conocemos a tu nuevo equipo de trabajo.

2Prepara tu taller

Antes de construir nada, necesitas montar tu espacio de trabajo. Son tres instalaciones y una cuenta. Media hora, máximo.

Lo que vas a instalar

1. VS Code (el taller donde vivirá tu app). Es un programa gratuito de Microsoft. Descárgalo de su sitio oficial e instálalo como cualquier app. No necesitas configurar nada todavía. Solo tenlo listo.

Piénsalo como el banco de trabajo de un carpintero. Tú no vas a usar casi ninguna de sus herramientas a mano — pero es donde todo va a estar puesto, y donde Claude Code va a trabajar.

2. Claude (cuenta Pro) (tu socio). Crea tu cuenta en claude.ai y sube al plan Pro. Como vimos, sin Pro no tienes acceso a Claude Code, así que este paso es obligatorio para construir.

3. La extensión de Claude Code en VS Code (donde Claude construye). Dentro de VS Code hay una sección de "extensiones" (cosas que le agregas para darle poderes). Busca Claude Code e instálala. Cuando termine, te va a pedir que inicies sesión con tu cuenta de Claude — la misma del paso 2.

Y ya. Ese es todo el setup técnico. No hay más.

No es el único camino Así trabajo yo y así construí Subz: VS Code + Claude Code. Existen otras formas (Claude Code también corre directo en la terminal o en una app de escritorio), pero no te compliques: lo de arriba funciona y es lo que esta guía asume de aquí en adelante.

Ahora monta tu "cerebro de proyecto" (esto es lo que casi nadie hace)

Aquí está la diferencia entre alguien que pelea con la IA cada sesión y alguien que avanza ordenado.

Claude no se acuerda de tus conversaciones pasadas. Cada vez que abres un chat nuevo, empieza de cero — no recuerda tu app, tus decisiones, ni de qué hablaron ayer. Si no haces nada al respecto, vas a repetir el mismo contexto una y otra vez (y a gastar tu límite mensual explicándole lo mismo).

La solución: le das a Claude un lugar fijo donde vive la memoria de tu proyecto. Claude tiene una función llamada Proyectos — un espacio donde guardas documentos que Claude lee siempre, en cada conversación dentro de ese Proyecto.

Vas a crear un Proyecto y meterle, de entrada, un solo documento: las reglas de cómo trabajan tú y Claude juntos. Es la versión simple del sistema que yo uso, y le ahorra a tu "Claude para pensar" tener que adivinar su rol cada vez.

Sin un Proyecto, cada chat arranca vacío y reexplicas todo. Con un Proyecto, todos beben de una memoria central.

▢ Copia esto en las instrucciones de tu Proyecto ▾

Pégalo en la sección de instrucciones del Proyecto (o como primer documento). Es el "contrato" de cómo van a trabajar.

Eres mi partner estratégico de producto y software para este proyecto.
No eres un asistente genérico: tienes criterio fuerte, eres directo y
conciso, y me retas cuando ves un mejor camino.

CÓMO TRABAJAMOS — dos roles separados:

1. TÚ (este chat) eres para PENSAR y DECIDIR. Aquí exploramos ideas,
   resolvemos dudas, planeamos, y redactamos las instrucciones que luego
   le paso a Claude Code. NO escribes el código final aquí.

2. CLAUDE CODE (en mi editor VS Code) es para EJECUTAR: escribe y edita
   los archivos reales de la app. Yo soy el puente entre los dos.

Regla mental: si la respuesta es una DECISIÓN, la resolvemos aquí.
Si la respuesta es un ARCHIVO, va en Claude Code.

LO QUE ESPERO DE TI:
- Hazme preguntas antes de asumir cosas. Una idea mal entendida cuesta caro.
- Dame opiniones con postura, no listas de "depende".
- Si algo es mala idea, dímelo y explica por qué, breve.
- Cuando vayamos a construir algo, ayúdame a redactar el prompt claro y
  completo para pasárselo a Claude Code, pensando en qué necesita saber.
- Sé honesto sobre costos reales de cualquier herramienta o servicio.

Cuando te comparta el estado de mi proyecto, léelo antes de responder.

Eso es todo por ahora. Más adelante (Sección 4) le sumarás a este Proyecto los otros dos documentos clave —los que mantienen a Claude al día sobre tu app específica— pero para arrancar, con esto basta.

Antes de pasar a construir: ten lista tu idea (aunque sea borrosa)

No necesitas tener todo claro. De hecho, el siguiente paso es justamente para aclarar una idea difusa. Pero sí necesitas un punto de partida: ¿qué problema tuyo quieres resolver?

Subz nació así de simple: "se me olvida a qué estoy suscrito y cuánto pago al mes." Eso fue todo. No tenía pantallas pensadas ni nombre. Solo un dolor concreto.

Entre más cotidiano y tuyo sea el problema, mejor. Las mejores primeras apps resuelven algo que a ti te molesta — porque entiendes el problema sin tener que investigarlo.

💬 Prompt: convierte tu idea borrosa en un plan claro ▾

Úsalo en tu Proyecto de Claude (el chat de pensar), cuando ya tengas aunque sea una idea vaga. Es la primera conversación de verdad de tu proyecto.

Tengo la idea de hacer una app que [DESCRIBE TU IDEA AQUÍ, AUNQUE SEA
VAGA — ej: "me ayude a llevar el control de los libros que quiero leer"].

Antes de construir nada, quiero fijar bien la idea. Hazme todas las
preguntas que necesites para entender qué quiero exactamente y, sobre
todo, qué entra SÍ O SÍ en la primera versión (el MVP) y qué se queda
para después. Sé estricto: ayúdame a cortar lo que no es esencial.

Una vez que la idea esté clara, ayúdame a armar un plan por etapas con
los pasos a seguir — no solo escribir el código, sino también lo demás:
dónde se va a publicar la app, qué revisar antes de lanzarla, y cualquier
cosa que un principiante olvidaría.

Qué es un MVP Quiere decir "versión mínima que ya sirve". Es la trampa #1 del principiante: querer construir todo de golpe. La disciplina es preguntarte "¿cuál es la versión más pequeña de esto que ya me resuelve el problema?" y construir solo eso primero. Subz empezó sin login, sin nube, sin gráficas. Solo: anota una suscripción, ve cuánto pagas al mes. Lo demás vino después, una capa a la vez.

En la siguiente sección entramos al corazón del asunto: cómo es una sesión real de construcción con Claude Code — el ciclo que vas a repetir hasta tener tu app.

3El ciclo de construcción

Aquí está el corazón de todo. Construir tu app no es un evento — es repetir un ciclo pequeño muchas veces. Una vez que entiendes el ciclo, todo lo demás es aplicarlo.

Primero: la sesión cero (crear tu proyecto)

Antes del primer ciclo hay un momento que pasa una sola vez: crear el proyecto y entender qué estás viendo en pantalla. Cinco minutos, y de ahí en adelante todo te resulta familiar.

Tu app es una carpeta. Esto sorprende a mucha gente: tu app no es algo místico que vive "en internet". Mientras la construyes, es una carpeta normal en tu computadora, como la de tus fotos o tus documentos. Adentro va a tener varios archivos (los que Claude Code escribe), pero es una carpeta y ya. Crea una carpeta vacía para tu proyecto en algún lugar que recuerdes (el Escritorio sirve perfecto) y ponle un nombre simple, sin espacios — por ejemplo mi-app.

Esa carpeta es lo único que de verdad te pertenece de todo esto. Las herramientas (VS Code, Claude) son intercambiables; tus archivos no. Por eso vale la pena tenerlos ordenados en un lugar tuyo.

Ábrela en VS Code. En VS Code hay una opción de "Abrir carpeta" (Open Folder). Seleccionas la carpeta que acabas de crear. Ahora VS Code está "parado" dentro de tu proyecto, listo para trabajar ahí.

Lo que ves en pantalla (las tres zonas que importan). VS Code se ve intimidante la primera vez, pero para esta guía solo necesitas ubicar tres zonas:

Las tres zonas de VS Code que importan. El resto, ignóralo por ahora.

La barra de la izquierda — tus archivos. Es la lista de todo lo que hay dentro de tu carpeta. Ahorita está casi vacía; conforme Claude Code construya, aquí van a ir apareciendo los archivos de tu app. No necesitas tocarlos ni entenderlos — solo saber que ahí están.
Claude Code — tu socio constructor. Es el panel donde le escribes a Claude Code. Aquí pasa toda la conversación de construcción: le pides, él hace, te reporta. Es donde vas a vivir la mayor parte del tiempo.
La terminal — la consola de abajo. Es una ventana de texto, normalmente en la parte de abajo, donde se escriben y aparecen "comandos del sistema". Parece de hacker, y por eso intimida — pero no tiene por qué. La verdad honesta: es posible que en algún momento la necesites tocar, y si te animas a aprender lo básico, te va a facilitar mucho el proceso. Pero si eres 100% principiante, la regla es simple: intenta no usarla por tu cuenta y deja que Claude Code la maneje por ti (muchas veces él puede correr los comandos solo, o te dice exactamente qué escribir). Y ante cualquier duda —siempre, sin excepción— pregúntale a Claude: "¿qué hace este comando?", "¿puedes correrlo tú en vez de yo?", "explícame paso a paso cómo usar la terminal para esto". No hay pregunta tonta. La terminal solo es peligrosa cuando le copias comandos que no entiendes; con Claude explicándote, deja de serlo.

Y ya. Esas tres zonas son tu mundo. Lo demás de VS Code, ignóralo por ahora.

Tu primera instrucción a Claude Code suele ser arrancar el proyecto en sí — pedirle que prepare la estructura base de la app. A partir de ahí, ya entras al ciclo que sigue.

Justo aquí, en la sesión cero, es buen momento de crear tus dos documentos de memoria (CLAUDE.md y CONTEXT.md) — los vemos a fondo en la Sección 4, pero el prompt para crearlos lo puedes usar desde esta primera sesión.

El ciclo, en cinco pasos

Cada pedacito de tu app —cada pantalla, cada botón, cada función— nace del mismo ciclo:

El ciclo que repites por cada pieza. El paso 5, cerrar, es el que conecta una sesión con la siguiente.

1. Decides (en el chat de pensar) — qué vas a construir en esta sesión. Una cosa, no diez.
2. Pides (le pasas la instrucción a Claude Code) — un encargo claro de eso que decidiste.
3. Revisas (en tu navegador) — abres lo que construyó y lo ves con tus propios ojos.
4. Ajustas (de vuelta con Claude Code) — corriges lo que no quedó, y repites hasta que la pieza te gusta.
5. Cierras (documentas y guardas) — dejas anotado qué cambió y en qué estado quedó todo, para que la próxima sesión arranque sabiendo dónde va.

Los primeros cuatro pasos construyen la pieza. El quinto es el que conecta esta sesión con la siguiente — y es el que casi todos saltan, el que te ahorra perder media hora reexplicándole todo a Claude cada vez que vuelves. Es tan importante que tiene su propia sección (la 4). Por ahora quédate con la idea: una pieza no está terminada hasta que la documentaste.

Paso 1 — Decide qué construir hoy (chat de pensar)

No abras Claude Code todavía. Primero, en tu chat, decide una sola cosa para esta sesión. "Hoy hago la pantalla donde se agrega una suscripción." Punto. No "hoy hago toda la app".

Si en la Sección 2 ya armaste tu plan por etapas, aquí solo tomas el siguiente pendiente de la lista. Si tienes dudas de cómo debería funcionar esa pieza, este es el momento de resolverlas hablando — antes de que se escriba una sola línea de código.

Por qué una cosa a la vez Cuando le pides todo de golpe, Claude Code construye un montón, algo sale mal, y no sabes qué de todo lo que hizo lo rompió. Cuando pides una pieza, si algo falla sabes exactamente dónde mirar. Avanzas más lento por paso, pero mucho más rápido en total — porque no te atoras.

Paso 2 — Pásale el encargo a Claude Code

Ahora sí, vas a VS Code. Le das a Claude Code la instrucción de construir esa pieza. La clave de un buen encargo: claro y específico, no largo. Claude Code trabaja mejor cuando sabe exactamente qué quieres, no cuando le escribes un testamento. Si ya discutiste la idea en el chat de pensar, redactar el encargo es fácil (de hecho, puedes pedirle al chat que te ayude a escribirlo).

💬 Prompt: arrancar una sesión de Claude Code ▾

Esto se lo dices a Claude Code en VS Code al empezar. Lo importante: que lea el estado de tu proyecto antes de tocar nada (esos documentos los creas en la Sección 4).

Antes de hacer cambios, lee los archivos CLAUDE.md y CONTEXT.md de este
proyecto para entender qué es la app y en qué estado va. Cuando termines,
dime que ya los leíste y espera mis instrucciones. No edites nada todavía.

💬 Prompt: pedir una pieza concreta ▾

Una vez que Claude Code ya leyó el contexto, le encargas la pieza del día.

Vamos a construir [LA PIEZA — ej: "la pantalla para agregar una nueva
suscripción"]. Debe permitir [QUÉ HACE — ej: "escribir el nombre del
servicio, el monto mensual, y la fecha del próximo cobro, y guardarlo"].

Hazlo de la forma más simple que funcione. Si algo de lo que pido no
está claro o ves un problema, pregúntame antes de construir en vez de
asumir. Cuando termines, dime qué hiciste y cómo lo pruebo.

Paso 3 — Revisa con tus propios ojos

Claude Code te va a decir "listo, ya quedó". No le creas a ciegas. Ábrelo y compruébalo tú.

Para apps web, Claude Code puede levantar una "vista previa" — una versión de tu app corriendo en tu propia computadora que abres en el navegador (normalmente en una dirección tipo localhost). Pídele que te diga cómo verla. La abres, y la usas como la usaría cualquier persona: ¿el botón hace lo que debe? ¿se ve bien? ¿se rompe si escribo algo raro?

La lección más cara que aprendí En Subz, Claude Code me reportó que todo estaba bien — y le creí. Días después, usando la app en mi teléfono, me di cuenta de que una parte central funcionaba de una forma que no tenía ningún sentido para el mundo real. El código estaba "correcto"; la idea estaba mal, y nadie lo cazó porque nadie lo usó de verdad hasta tarde. Probar con tus propios ojos, en cada vuelta, no es opcional. La IA verifica que el código corre; solo tú puedes verificar que la app sirve.

Paso 4 — Ajusta y repite

Casi nunca queda perfecto a la primera. Normal. Le dices a Claude Code qué está mal —con el mismo estilo claro— y lo corrige. Revisas otra vez. Ajustas otra vez. Cuando esa pieza ya te gusta, pasas al paso 5 para cerrar — y de ahí, al siguiente.

💬 Prompt: pedir un ajuste ▾

Probé lo que hiciste y [QUÉ PASÓ — ej: "el botón de guardar no hace nada
cuando lo aprieto" / "se ve bien pero quiero que el monto se vea más
grande"]. Arréglalo y dime qué cambiaste.

El paso 5 —cerrar— es tan importante que merece su propia sección. Vamos a ella.

4Cerrar bien para arrancar fresco

Esta es la sección que separa a quien avanza de quien se atora. No habla de construir — habla de cómo terminar una sesión para que la siguiente no empiece desde cero.

El problema, que seguro ya sentiste (o vas a sentir)

Pasa una de dos cosas, y las dos duelen:

Te quedas en el mismo chat para todo. Al principio va bien. Pero la conversación se hace larguísima, y Claude se vuelve lento y olvidadizo — tiene tanto que "recordar" de la sesión que empieza a perder el hilo y a contradecirse.
Abres un chat nuevo… y Claude no sabe nada. Empiezas de cero. Te toca reexplicarle qué es tu app, qué decidieron ayer, en qué estado va. Pierdes 20 minutos y un montón de tu límite mensual solo poniéndolo al día.

Ninguna de las dos es culpa tuya. Es por cómo funciona Claude: no recuerda entre sesiones. La solución no es aguantar chats eternos ni reexplicar cada vez. La solución es dejar la memoria escrita en un lugar fijo — para que cualquier sesión nueva la lea y arranque al corriente en segundos.

El cierre convierte "arrancar de cero" en "arrancar al corriente".

Tu app necesita dos documentos de memoria

Son dos archivos de texto simple que viven dentro de tu proyecto. No los escribes tú a mano — se los pides a Claude Code. Pero tú decides qué llevan.

1. CLAUDE.md — el "qué es" (casi no cambia). Las reglas y la identidad de tu app. Qué es, con qué está construida, las decisiones de fondo que ya tomaste. Esto se escribe una vez al inicio y casi no se toca. Es el documento que le dice a cualquier Claude nuevo: "esto es el proyecto, estas son las reglas."

2. CONTEXT.md — el "cómo va" (cambia cada sesión). El estado vivo. En qué punto está la app hoy, qué se hizo en la última sesión, qué sigue, qué quedó a medias. Este es el que actualizas al cerrar cada sesión.

CLAUDE.md es la ficha técnica de tu app (no cambia mucho). CONTEXT.md es la bitácora (escribes en ella cada vez que trabajas). Las dos juntas son la memoria que Claude no tiene por sí solo.

💬 Prompt: crear tus dos documentos de memoria ▾

Una vez, cuando ya fijaste tu idea con el chat de pensar. Pídeselo a Claude Code.

Quiero crear dos documentos de memoria para este proyecto, en la raíz
del proyecto:

1. CLAUDE.md — qué es la app, con qué está construida, y las reglas y
   decisiones de fondo. Es la "ficha técnica" que casi no cambia.

2. CONTEXT.md — el estado actual: en qué punto va la app, qué se ha hecho,
   qué falta. Es la "bitácora" que actualizaremos cada sesión.

Te paso la información de mi app: [PEGA AQUÍ EL PLAN QUE ARMASTE EN EL
CHAT DE PENSAR]. Crea los dos archivos con esa base. Mantenlos cortos y
claros — son para orientarte rápido, no enciclopedias.

El cierre, paso a paso (el paso 5 del ciclo)

Cuando terminaste la pieza del día y ya te gusta, antes de cerrar la laptop:

Pídele a Claude Code que guarde tu progreso en un punto estable (el commit / punto de control). Así puedes volver aquí si algo se rompe después.
Pídele que actualice CONTEXT.md con lo que cambió: qué quedó hecho, qué sigue, qué dejaste a medias. (Y CLAUDE.md solo si tomaron alguna decisión de fondo nueva.)
Sube los documentos actualizados a tu Proyecto de Claude — al espacio de instrucciones/documentos, reemplazando los viejos. Así tu chat de pensar también arranca al corriente la próxima vez.
Cierra la sesión. En serio, ciérrala.

💬 Prompt: cerrar la sesión ▾

Al terminar, a Claude Code.

Terminamos por hoy. Antes de cerrar:
1. Guarda el progreso en un punto estable.
2. Actualiza CONTEXT.md: qué quedó hecho en esta sesión, qué sigue, y
   qué quedó pendiente o a medias. Actualiza CLAUDE.md solo si tomamos
   alguna decisión de fondo nueva.
3. Dame un resumen corto de qué cambiaste hoy.

Y entonces, arranca fresco

La próxima vez que te sientes a trabajar, abre una sesión nueva sin miedo. Gracias al cierre que hiciste:

Tu chat de pensar ya tiene el CONTEXT.md actualizado en el Proyecto → sabe en qué vas sin que le expliques.
Tu Claude Code lee CLAUDE.md y CONTEXT.md al arrancar (con el prompt de inicio de la Sección 3) → sabe qué es la app y dónde quedó.

Arrancas en 30 segundos, no en 20 minutos. Ese es el premio de cerrar bien.

No hagas sesiones eternas Ahora ya ves por qué. Una sesión por pieza (o por un par de piezas chicas), cierras, documentas, y reabres fresco para lo siguiente. Cerrar y reabrir no es perder tiempo — es lo que mantiene a tu socio rápido y a ti sin reexplicar. Cada vuelta del ciclo termina aquí.

En la siguiente sección: qué hacer cuando algo se rompe y no entiendes por qué — la habilidad de salir del hoyo sin entrar en pánico.

5Cuando algo se rompe (y no entiendes por qué)

Va a pasar. No es si, es cuándo: vas a abrir tu app y algo no funciona, o la pantalla está en blanco, o Claude Code hizo un cambio y ahora algo que antes servía ya no. Esto es completamente normal — le pasa a todos, incluso a programadores con años de experiencia. La diferencia entre quien avanza y quien abandona no es que a uno no se le rompa nada. Es que uno sabe cómo salir del hoyo sin entrar en pánico.

Lo primero, y lo más importante No te asustes y no borres todo. El instinto del principiante es entrar en pánico, deshacer cosas al azar, o tirar el proyecto y empezar de nuevo. No hagas eso. Casi todo tiene arreglo, y casi siempre el arreglo es más simple de lo que parece. Respira. Tu trabajo no se perdió.

Cuando algo se rompe: una secuencia para seguir, en vez de paralizarte.

Tu mejor herramienta: copiar y pegar el error

Cuando algo falla, casi siempre hay un mensaje de error en alguna parte — un texto, normalmente rojo, en la terminal o en una zona de la pantalla. A ti te va a parecer chino. A Claude no.

La técnica más poderosa que tienes es ridículamente simple: copia ese mensaje completo y pégaselo a Claude Code, preguntándole qué significa y cómo arreglarlo. Ese texto que para ti es indescifrable, para Claude es una dirección exacta de dónde está el problema.

💬 Prompt: cuando algo se rompe ▾

A Claude Code, pegándole el error si lo encuentras.

Algo dejó de funcionar. Esto es lo que pasa: [DESCRIBE QUÉ VES — ej:
"la pantalla se quedó en blanco" / "el botón ya no hace nada"].

Aquí está el mensaje de error que aparece: [PEGA EL ERROR COMPLETO, o
escribe "no veo ningún mensaje de error" si no encuentras uno].

Explícame en palabras simples qué crees que está pasando, y arréglalo.
Si necesitas que yo busque algo o te dé más información, dime exactamente
qué y cómo.

Si no hay mensaje de error visible

A veces no hay texto rojo — simplemente "no se ve bien" o "no hace lo que debería". Igual sirve describirle a Claude Code qué esperabas que pasara y qué pasó en realidad, lo más concreto posible. "Esperaba que al apretar guardar apareciera mi suscripción en la lista, pero la lista se queda vacía." Esa frase le dice a Claude mucho más de lo que crees.

Sé específico, no general "No funciona" es la peor descripción posible — no le dice nada a Claude. "Cuando aprieto el botón azul, no pasa nada y la pantalla no cambia" le dice dónde mirar. Entre más preciso seas sobre qué falla y cuándo, más rápido lo resuelve.

Tu red de seguridad: volver a un punto que funcionaba

¿Recuerdas que en cada cierre de sesión le pides a Claude Code que guarde tu progreso en un punto estable? Aquí es donde eso te salva la vida.

Si algo se rompió feo y ni tú ni Claude logran arreglarlo en un par de intentos, siempre puedes volver al último punto donde todo funcionaba — como cargar la última partida guardada de un videojuego. Pierdes lo que hiciste desde ese punto, sí, pero recuperas una app que sirve. A veces es la salida más sabia: no pelear horas con algo enredado, sino regresar a tierra firme y reintentar con más calma.

💬 Prompt: volver a un punto estable ▾

A Claude Code. Es una salida de emergencia, no algo de cada día.

Llevamos rato intentando arreglar esto y se está enredando más. Prefiero
volver al último punto estable que guardamos, donde la app funcionaba.

¿Puedes mostrarme cuáles son los puntos guardados que tengo, explicarme
cuánto trabajo perdería volviendo al último estable, y si estoy de
acuerdo, regresarme ahí? No hagas el cambio hasta que yo confirme.

Cuándo parar y pedir aire

Hay un patrón peligroso: el "ya casi" infinito. Claude intenta un arreglo, no funciona; intenta otro, tampoco; y tú llevas una hora dando vueltas, cada vez más frustrado, gastando tu límite mensual sin avanzar. Reconoce ese momento.

Cuando lleves dos o tres intentos sin progreso real, para. Tus mejores opciones son: volver al punto estable (arriba), cerrar la sesión y reintentar fresco más tarde (muchas veces una sesión nueva de Claude, sin todo el enredo acumulado, resuelve en un intento lo que la sesión cansada no podía), o llevarte la duda al chat de pensar para entender el problema antes de seguir picando. Insistir cansado y frustrado es la peor estrategia.

Y a veces el problema no es la respuesta, es la pregunta Este es uno de los aprendizajes más valiosos que te puedo dar. Cuando Claude lleva varios intentos fallidos atacando algo de la misma forma, muchas veces es porque le encuadraste el problema demasiado estrecho — y se queda dando vueltas dentro de esa caja. Ejemplo: le pides "haz que esto cargue más rápido" y prueba veinte ajustes pequeños, ninguno funciona. El problema real podía estar en otro lado completamente, pero nunca lo consideró porque tú (sin querer) lo encerraste en "arréglalo por aquí".

La salida es reencuadrar la pregunta hacia arriba. En vez de pedir otra variación de lo mismo, abre el ángulo: "Da un paso atrás: ¿qué podría estar causando esto de raíz que no estoy considerando? ¿Qué estrategias o ángulos distintos se me podrían estar escapando?" Esa pregunta le da permiso a Claude de cuestionar el enfoque entero. Y este tipo de paso atrás conviene darlo en tu chat de pensar, no en Claude Code: Code está metido entre el código, sesgado a arreglar desde adentro; el chat puede ver el problema completo desde afuera.

💬 Prompt: dar un paso atrás cuando estás atorado ▾

Úsalo en el chat de pensar cuando lleves rato sin avanzar atacando el problema de la misma forma.

Llevo rato atorado con un problema y quiero dar un paso atrás antes de
seguir picando.

El problema es: [DESCRÍBELO — ej: "una parte de mi app se siente muy
lenta"]. He intentado resolverlo [QUÉ HAS INTENTADO — ej: "ajustando
la parte que carga los datos"] y no ha funcionado.

No me des otra variación de lo mismo. Quiero que cuestiones el enfoque:
¿qué podría estar causando esto de raíz que quizás no estoy viendo? ¿Qué
ángulos o estrategias completamente distintas se me podrían estar
escapando? Hazme las preguntas que necesites para diagnosticarlo bien.

La mentalidad que lo cambia todo

Que algo se rompa no es una señal de que no sirves para esto. Es parte del proceso, literalmente para todos. Cada error que resuelves te enseña algo y te hace menos dependiente del pánico la próxima vez. La meta no es nunca romper nada — es perderle el miedo a romper, porque sabes que tienes las herramientas para arreglarlo.

Lo dije al inicio y lo repito aquí: esto no es magia, y tampoco es tragedia. Es construir. Y construir incluye romper y rearmar. Cada vez que sales de un hoyo, eres un poco más capaz que ayer.

En la siguiente y última sección: sacar tu app del taller y ponerla en internet, con un link real que puedes compartir — gratis.

6Sácalo al mundo

Tu app funciona en tu computadora. Falta el último paso, el más satisfactorio: ponerla en internet con un link real que puedas mandarle a quien quieras. Cuando alguien abra ese link desde su teléfono al otro lado del mundo y tu app funcione, vas a sentir algo distinto. Eso ya no es un experimento. Es tuyo y está vivo.

Qué significa "publicar" (en simple)

Hasta ahora tu app vivía solo en tu carpeta, visible solo para ti. Publicar (la palabra técnica es deploy) es subir esa carpeta a un servicio que la mantiene encendida en internet 24/7 y le da una dirección web. Tú no tienes que ser dueño de ningún servidor ni saber de redes — hay servicios que hacen todo ese trabajo pesado por ti, gratis para algo de tu tamaño.

Por qué es gratis (sin truco) La app que construiste en esta guía es lo que se llama un sitio estático — archivos que se le entregan al visitante tal cual, sin una computadora pensando del otro lado por cada persona que entra. Eso es baratísimo de mantener, y por eso varios servicios lo alojan gratis sin problema. (Cuando tu app empiece a tener login y base de datos —la Parte 2— ahí sí entran costos, y seré igual de honesto contigo sobre ellos.)

A dónde subirla

Hay varias buenas opciones gratuitas. Las más comunes para empezar:

Vercel y Cloudflare Pages — ambos te conectan tu proyecto y publican tu app con un link en minutos. Generosos en su nivel gratis, modernos, y se actualizan solos cada vez que cambias algo.
GitHub Pages — otra opción gratis muy usada. Así publiqué la primera versión de Subz.

No te paralices eligiendo. Cualquiera de las tres sirve de sobra para tu primera app. Si no tienes preferencia, pregúntale a Claude cuál encaja mejor con lo que construiste — y deja que te guíe en el proceso.

De tu carpeta a un link público. Y de ahí en adelante, cada cambio que guardas actualiza el link solo.

Honestidad sobre el camino Este último paso es, irónicamente, donde un principiante más puede atorarse — no porque sea difícil, sino porque toca crear un par de cuentas y conectar cosas. Tranquilo. Es un paso que se hace una vez y luego queda automático. Apóyate en Claude en cada parte: pregúntale qué es cada cosa que te pide, y si puede hacerlo por ti, déjalo.

Cómo lo haces (apoyado en Claude, de principio a fin)

No te voy a dar un instructivo rígido aquí, por una razón: los pasos exactos cambian según el servicio que elijas y van actualizándose con el tiempo. Lo que no cambia es el método — pídele a Claude que te guíe paso a paso, y deja que haga por ti lo que pueda. A grandes rasgos, el camino es:

Tu proyecto necesita vivir en un lugar que el servicio pueda leer — normalmente GitHub, una especie de "nube para proyectos". Claude Code te puede ayudar a subir tu carpeta ahí.
Conectas ese proyecto al servicio de publicación (Vercel, Cloudflare o el que elijas) — le das permiso de leer tu proyecto, y él lo publica.
Recibes tu link. Algo como mi-app.vercel.app. Ese link ya es público. Pruébalo desde tu teléfono.

Lo bonito viene después: de ahí en adelante, cada vez que cambies algo y lo guardes, tu app en internet se actualiza sola. No vuelves a hacer este proceso. Construyes, guardas, y lo que ves en tu link siempre es lo último. Así funciona Subz hoy: cada cambio que termino aparece solo en su dirección pública.

💬 Prompt: publicar tu app por primera vez ▾

A Claude Code, cuando tu app ya funciona en tu computadora y la quieres en internet.

Mi app ya funciona en mi computadora y quiero publicarla en internet
gratis, con un link que pueda compartir. Soy principiante, así que
guíame paso a paso.

Primero: dime qué servicio gratuito de publicación recomiendas para una
app como la mía y por qué. Luego, llévame por todo el proceso una cosa a
la vez, explicándome cada paso en palabras simples: qué cuenta necesito
crear, qué hace cada cosa que me pidas, y qué puedes hacer tú por mí.
No avances al siguiente paso hasta que yo confirme que terminé el actual.

Lo lograste. ¿Y ahora qué?

Si seguiste hasta aquí y tienes una app en internet: en serio, felicidades. Hace unas secciones no sabías qué era VS Code. Acabas de construir y publicar algo real, tuyo, funcionando en el mundo. Eso casi nadie lo hace. La mayoría se queda en la idea. Tú construiste.

Quédate con esto, que es el corazón de todo lo que hago: dejaste de consumir y empezaste a crear. Y resulta que sí podías.

¿Hasta dónde puede llegar tu app? Lo que construiste es la base. Cuando estés listo para el siguiente nivel —que tu app guarde datos de verdad, que tenga usuarios con su propio login, que viva en tu propio dominio (tuapp.com en vez de tuapp.vercel.app)— eso es la Parte 2 de esta guía. Ahí entramos a backend, bases de datos y seguridad: más poderoso, con costos reales que te voy a explicar sin rodeos, y construido exactamente con el mismo método que ya dominas. El ciclo no cambia. Solo las piezas se vuelven más interesantes.

Por ahora, disfruta lo que hiciste. Mándale el link a alguien. Te lo ganaste.

Piénsalo.