Tu primera herramienta con Claude Code en una tarde

Hasta ahora has usado Claude para escribir y ordenar. Ahora vas a pedirle que construya algo: una herramienta pequeña que se abre en tu navegador, como una página con tus servicios y precios, o una calculadora de presupuesto. Te lleva una tarde.

No tienes que entender el código que salga. Tienes que saber pedirlo por partes y comprobar que hace lo que quieres. Eso sí se puede aprender.

Lo que vas a conseguir

• Un archivo que se abre con doble clic en tu navegador.
• Una página de servicios y precios, o una calculadora de presupuesto, con tus datos.
• Saber pedir cambios sin que se rompa lo que ya funcionaba.
• Tener claro qué queda fuera por ahora: ponerlo en internet.

Antes de empezar

• Claude Code instalado y probado. Si no, empieza por Claude Code sin saber programar.
• Una carpeta nueva y vacía, por ejemplo mi-herramienta.
• Tus servicios con precios ya escritos (aunque sea en una nota).
• Tres o cuatro horas.

01Elige una herramienta pequeña

La primera tiene que caber en un único archivo y no pedir nada a nadie. Dos opciones buenas:

• Página de servicios y precios: una lista bonita de lo que ofreces, cuánto cuesta y un botón para escribirte.
• Calculadora de presupuesto: el cliente marca lo que necesita y la página suma el total.

Ambas se abren en el navegador. No hay nada que instalar ni servidor que montar. Y no guardan datos de nadie.

Elige una. Si dudas, la página de servicios.

02Abre Claude Code en la carpeta

Abre la terminal, entra en la carpeta con cd y escribe claude. Si no recuerdas cómo, está en la guía anterior. Lo importante es que la carpeta esté vacía y sea solo para esto.

Si ya hiciste tu segundo cerebro, puedes copiar precios.md y negocio.md a esta carpeta o decirle a Claude dónde están. Así no repites nada.

03Pide el primer paso: solo el esqueleto

Pedir todo de golpe sale peor. Pide por partes. La primera:

Quiero una página web de un solo archivo, que se abra con doble clic en el navegador y no necesite instalar nada. Es para [TIPO DE NEGOCIO, POR EJEMPLO: una peluquería con dos sillas en una ciudad pequeña].

De momento solo esto:
- Un título con el nombre [NOMBRE DEL NEGOCIO] y una frase corta: [FRASE].
- Una lista de servicios con nombre, descripción corta y precio:
  [SERVICIO 1]: [DESCRIPCIÓN], [PRECIO]
  [SERVICIO 2]: [DESCRIPCIÓN], [PRECIO]
  [SERVICIO 3]: [DESCRIPCIÓN], [PRECIO]
- Que se vea bien en el móvil.
- Un estilo limpio, colores [COLORES], letra fácil de leer.

Usa solo los datos que te he dado. Si algo falta, déjalo vacío y dímelo. No inventes textos, precios ni opiniones. Cuando termines, dime cómo abrirlo y qué has creado.

Si prefieres la calculadora:

Quiero una página web de un solo archivo, que se abra con doble clic en el navegador y no necesite instalar nada. Es una calculadora de presupuesto para [TIPO DE NEGOCIO].

De momento solo esto:
- Una lista de servicios que el cliente puede marcar, cada uno con su precio:
  [SERVICIO 1]: [PRECIO]
  [SERVICIO 2]: [PRECIO]
  [SERVICIO 3]: [PRECIO]
- Un total que se actualice solo al marcar o desmarcar.
- Que se vea bien en el móvil.

Usa solo estos precios. No añadas descuentos ni servicios que yo no haya dicho. Cuando termines, dime cómo abrirlo.

Claude te propondrá crear un archivo, normalmente index.html. Lee lo que va a hacer y acepta. Es una carpeta nueva y vacía, sin riesgo.

04Ábrelo y revísalo

Busca el archivo en la carpeta y haz doble clic. Se abre en tu navegador.

Revisa como lo haría un cliente:

1. ¿Los precios son exactamente los tuyos? Compara uno por uno.
2. ¿Los textos son los tuyos o ha inventado alguno?
3. ¿Se ve bien en el móvil? Abre el archivo en el móvil o reduce la ventana del navegador.
4. En la calculadora: marca todo, no marques nada, marca solo uno. ¿El total es correcto cada vez? Haz la cuenta a mano al menos con dos combinaciones.

Apunta lo que falla y lo que no te gusta. Eso es lo que pides en el siguiente paso.

05Pide cambios, de uno en uno

Un cambio por mensaje. Si pides seis a la vez, es más fácil que algo salga mal y no sabrás qué.

Quiero un cambio: [UN SOLO CAMBIO, POR EJEMPLO: pasar el precio de "[SERVICIO 2]" de [PRECIO ACTUAL] a [PRECIO NUEVO] / poner un botón de contacto que abra WhatsApp con el número [NÚMERO] / cambiar el color del título a [COLOR]]. No toques nada más. Dime qué has cambiado.

Cuando pidas algo nuevo, comprueba también que lo anterior sigue funcionando.

Algunas ideas para ir mejorando después, de una en una:

• Una pregunta frecuente con tres preguntas y tus respuestas.
• Un apartado «cómo trabajo» con tres pasos.
• En la calculadora, un botón para copiar el resumen y mandarlo por mensaje.
• Textos más grandes si tus clientes son mayores.

06Si algo se rompe

Cuando algo deje de funcionar, no te agobies. Dile qué ves, no por qué crees que pasa:

Algo ha dejado de funcionar. Lo que veo: [LO QUE VES, POR EJEMPLO: el total sale en blanco al marcar el segundo servicio]. Antes funcionaba. Busca el motivo, arréglalo y dime qué ha pasado. No cambies nada que no esté relacionado con esto.

Si sigue mal, pídele que vuelva atrás: «deshaz el último cambio». Y antes de cambios grandes, haz tú una copia del archivo (index-copia.html).

07Lo que queda fuera: publicarlo en internet

Ahora la herramienta vive en tu ordenador. Para que otras personas la usen hay que publicarla: hace falta un sitio donde alojarla, y eso trae decisiones nuevas (dónde, con qué cuenta, con qué dirección, qué pasa con los datos).

No lo hagas todavía. Úsala unos días tú. Enséñasela a un amigo mandándole el archivo. Publicar es otro paso y merece su propia guía.

Hasta entonces, para enseñarla a un cliente puedes mostrarla en tu pantalla o mandarle el archivo.

08Lo que sale con práctica

Esto es el primer escalón. Lucas se montó con Claude Code un editor que corta sus vídeos a partir de una frase. No sale en una tarde, sale encadenando herramientas pequeñas como esta. La primera enseña lo importante: describir bien, pedir por partes y revisar.

Qué puede salir mal

• Los precios no coinciden. Revisa cada cifra. Claude puede equivocarse al copiar. Dile exactamente cuál está mal.
• Parece una plantilla genérica. Pide cambios concretos: colores, tamaño de letra, orden de los servicios.
• Se rompe al pedir un cambio. Pide el cambio de nuevo, más pequeño, o que deshaga el último.
• El archivo no se abre bien. Asegúrate de que termina en .html y ábrelo con un navegador.
• Se llena de cosas que no pediste. Dile que quite lo que sobra y que no añada nada sin pedírselo.

Preguntas frecuentes

Siguiente paso

Elige hoy entre la página de servicios y la calculadora, copia el prompt del paso 3 con tus datos y llega a tener un archivo abierto en tu navegador antes de acabar la tarde.

Fuentes