|
|
|
¡Buenas! Volvemos hoy con la cuarta y última edición especial sobre Claude. |
Hemos llegado al final de la serie. Y queríamos cerrarla a lo grande, con la pieza que más cuesta de creer hasta que la pruebas: crear cosas reales sin saber programar. Webs, calculadoras, dashboards, herramientas... todo escribiendo en español como si estuvieras dándole instrucciones a un compañero. |
Esto se llama Claude Code. Y aunque el nombre suene técnico, te prometemos que no lo es. Hasta hace unos meses estaba pensado solo para programadores. Pero algo cambió a principios de año y ahora cualquier persona puede usarlo. Eso sí, sigue habiendo poca gente explicándolo de forma sencilla, así que vamos nosotros. |
Para que esta edición no se quede en teoría, vamos a construir juntos algo concreto y útil: una calculadora de presupuestos personalizada para tus clientes. Un caso real, accionable, que cierra el círculo de toda la serie. Te enseñamos las herramientas → te explicamos lo básico → te enseñamos a automatizar → y hoy, te enseñamos a crear cosas que tus clientes pueden usar. |
Como siempre, al final te dejamos la pregunta para saber si este formato os ha aportado valor. |
Vamos a ello. |
|
|
🛠️ ¿Qué es Claude Code y por qué te interesa? |
Claude Code es una de las cuatro piezas del ecosistema de Claude (junto a Chat, Cowork y Proyectos, que ya hemos visto en las ediciones anteriores). Es la pieza que convierte palabras en código real. |
Te lo explicamos rápido: el código es lo que hace funcionar las webs, las apps y las herramientas digitales. Tradicionalmente, para crear cualquiera de estas cosas necesitabas aprender lenguajes de programación (HTML, JavaScript, Python...). Eso ha cambiado. Ahora puedes describir lo que quieres en español, y Claude lo escribe en código por ti. |
¿Para qué te sirve si no eres programador? |
Crear una landing page profesional para tu negocio o proyecto. Construir una calculadora interactiva que tus clientes pueden usar. Generar un dashboard con tus números (ventas, clientes, métricas). Diseñar páginas personalizadas para regalos, presentaciones o eventos. Hacer prototipos rápidos de ideas que tienes en la cabeza.
|
El cielo es el límite. Y todo sin escribir una sola línea de código. |
|
|
|
|
🎯 Caso real: vamos a crear una calculadora de presupuestos |
Imagina que ofreces servicios profesionales y tus clientes potenciales siempre te preguntan lo mismo: "¿cuánto me costaría?". En lugar de responder uno a uno, vamos a construir una herramienta web donde el cliente pueda meter sus datos (tipo de servicio, número de horas, urgencia, extras) y obtener un presupuesto orientativo al instante. |
Esto es exactamente el tipo de cosa que antes requería contratar a un desarrollador o pasar semanas aprendiendo. Hoy lo vas a hacer tú en menos de 30 minutos. |
Lo único que necesitas: |
La aplicación de escritorio de Claude (la de Cowork de las ediciones anteriores). Una cuenta Pro o superior. Una idea de qué quieres construir.
|
Si todavía no tienes la app, vuelve a la primera o segunda edición especial. Allí te explicamos cómo descargarla. |
|
|
🚀 Cómo crear tu primera calculadora paso a paso |
Paso 1: Abre Claude Code |
Abre la aplicación de escritorio de Claude. Arriba verás tres pestañas: Chat, Cowork y Code. Haz clic en Code. |
|
|
Asegúrate de tener seleccionado el modelo Opus 4.6 (el más potente, como ya vimos en ediciones anteriores). |
Paso 2: Crea una carpeta para el proyecto |
Antes de empezar, crea una carpeta en tu ordenador llamada "calculadora-presupuestos". Aquí es donde Claude va a guardar todos los archivos del proyecto. En Code, haz clic en "Add Folder" y selecciona esa carpeta. |
Paso 3: Escribe el prompt |
Aquí está la magia. Vas a describir en español lo que quieres y Claude lo va a construir. Cuanto más concreto seas, mejor resultado obtendrás. Te dejamos un prompt que funciona: |
Quiero crear una calculadora de presupuestos web para mi
negocio de [tipo de servicio que ofreces].
El cliente debe poder seleccionar:
1. Tipo de servicio: básico (300€), estándar (700€), premium (1500€).
2. Horas estimadas del proyecto (con un selector numérico).
3. Plazo de entrega: normal, urgente (+30%), exprés (+60%).
4. Extras: revisión adicional (+50€), informe final (+100€),
reunión de presentación (+150€).
Al rellenar los campos, debe mostrar el presupuesto total en
tiempo real, con desglose claro de cada concepto.
Diseño limpio, profesional, fácil de usar desde el móvil.
Colores: azul oscuro y blanco. Tipografía moderna.
No sé programar y no quiero aprender. Hazlo todo tú.
|
|
|
|
Paso 4: Acepta los permisos |
Claude te va a pedir permisos para crear archivos en tu carpeta. Acepta todos. Si quieres ahorrarte clics, busca la opción "Allow always" (permitir siempre) la primera vez que te lo pregunte. |
|
|
Paso 5: Mira cómo lo construye |
A partir de aquí, Claude trabaja solo. Va a crear los archivos necesarios, escribir el código y montar la calculadora. Tú solo tienes que esperar (o irte a por un café). En unos minutos tendrás tu calculadora lista. |
|
|
Paso 6: Pídele que te dé el enlace para usarla |
Cuando termine, escribe: |
Dame un enlace para poder ver y probar la calculadora
desde mi navegador.
|
Claude te dará un enlace local que puedes abrir en Chrome, Safari o el navegador que uses. Ahí está tu calculadora funcionando, lista para que la pruebes y, cuando estés contento, la subas a tu web. |
|
|
|
|
|
🔁 El ciclo de mejora infinita |
Aquí viene lo más adictivo de Claude Code. Una vez tienes la primera versión, el ciclo es así: |
Abres la calculadora en el navegador. La pruebas, anotas todo lo que no te gusta. Vuelves a Claude Code y le dices los cambios concretos. Claude los aplica al instante. Refrescas el navegador. Vuelves a probar.
|
Por ejemplo: |
Hazme estos cambios en la calculadora:
1. El título es demasiado pequeño, agrándalo.
2. Mueve el botón de "Calcular" más arriba, justo después
del último selector.
3. Añade un campo opcional para el nombre del cliente al principio.
4. El color azul es demasiado oscuro, hazlo un poco más claro.
|
Claude lo aplica todo de golpe. Refrescas el navegador y ahí están los cambios. Esto se llama vibecoding (sí, con ese nombre tan raro). Y una vez lo pruebas, no hay vuelta atrás. |
|
|
🧠 Cinco trucos para sacarle el máximo partido |
Hemos estado probando Claude Code durante semanas. Estos son los cinco trucos que más te van a servir: |
1. Empieza con una captura de pantalla |
Si has visto una web, una calculadora o una herramienta que te gusta, hazle una captura. Arrástrala directamente a Claude Code y dile: |
Quiero que construyas algo parecido a esto, pero adaptado
a mi negocio de [lo que sea].
|
Claude entiende la imagen, recrea la estructura y la personaliza. Es muchísimo más rápido que describir lo que quieres con palabras. |
2. Describe el resultado, no los pasos |
Mal prompt: "Crea un archivo HTML, añade una hoja de estilos CSS, usa Flexbox para el layout, hazlo responsive..." |
Buen prompt: "Quiero una landing page limpia para mi consultoría. Titular grande, 4 servicios listados, botón para reservar cita, pie de página con mis redes sociales." |
Tú eres el cliente. Claude es el desarrollador. Dale el brief, no las instrucciones técnicas. |
3. Usa tus archivos de contexto |
¿Recuerdas los archivos sobre-mi.md y guías de marca de las ediciones anteriores? Funcionan también aquí. Mete tus archivos en la carpeta del proyecto y dile: |
Lee primero los archivos de mi carpeta. Usa mi tono y estilo
para los textos de la calculadora.
|
El resultado deja de sonar genérico y empieza a sonar a ti. |
4. Una cosa a la vez |
No le pidas 12 funcionalidades en un solo prompt. Empieza por la base (el cálculo principal). Cuando funcione, añade la siguiente capa (el diseño). Luego los extras. Cada conversación es un sprint con un único objetivo. Así evitas líos y los resultados son mucho mejores. |
5. Si algo se ve mal, captúralo |
¿Ves un fallo visual? ¿La calculadora se descuadra en el móvil? Hazle una captura, pégala en Claude Code y di: |
Esta sección se descuadra en el móvil. Arréglalo.
|
Claude ve el problema y lo corrige en segundos. Mucho más rápido que intentar describirlo con palabras. |
|
|
💾 Dale memoria a tu proyecto (truco bonus) |
Cada vez que abres Claude Code en un proyecto, empieza desde cero. No recuerda lo que hiciste ayer, ni qué colores elegiste, ni cómo querías la estructura. Esto se soluciona con un prompt que solo tienes que escribir una vez: |
Crea un archivo CLAUDE.md en la raíz de este proyecto.
Dentro, anota todo lo que has aprendido sobre este proyecto:
la estructura de archivos, las decisiones de diseño que he
tomado (tipografías, colores, distribución), mis preferencias
y qué páginas o secciones existen.
|
Claude crea un archivo llamado CLAUDE.md en tu carpeta. Es como una memoria permanente. La próxima vez que abras el proyecto (3 días, 3 semanas o 3 meses después), Claude leerá ese archivo primero y ya sabrá todo el contexto. Le dices "añade una sección de testimonios" y lo hará en el mismo estilo del resto. |
Los desarrolladores llevan meses haciendo esto. Ahora también puedes tú. |
|
|
🔎 Donde Claude Code se queda corto (porque seguimos siendo honestos) |
No todo es perfecto: |
Consume mucho. Una sesión de Claude Code gasta lo que gastarían 20 conversaciones normales. Si lo usas a diario con el plan Pro (20€/mes), llegarás al límite en pocos días. Si vas a usarlo en serio, plantéate el plan Max. |
No puedes revisar el código. Cuando Claude escribe código, te estás fiando de él. Tú no lees código y nosotros tampoco. La forma de "revisar" es probar la web: hacer clic en todos los botones, comprobar que todo funciona, abrirla en el móvil. Tus ojos son tu control de calidad. |
A veces se queda en bucle. Claude detecta un fallo, intenta arreglarlo, crea un nuevo fallo, intenta arreglarlo de nuevo... Si ves que el mismo error aparece dos veces, escribe: |
Para. Explícame qué está fallando exactamente.
Dame dos enfoques distintos para resolverlo.
|
Esto rompe el bucle siempre. |
El diseño por defecto es del montón. Claude crea webs funcionales, pero su estilo visual por defecto es genérico. Si le dices "que quede bien", obtendrás algo que parece igual al resto. Para que destaque, dale referencias: capturas de webs que te gusten, paletas de colores concretas, tipografías específicas. |
|
|
⏱️ Tu plan para este fin de semana (30 minutos) |
Si quieres probarlo, aquí va el plan: |
Minutos 0-5: Abre Claude Code. Si no tienes la app, descárgala desde claude.com/download (cuenta Pro mínimo). Crea una carpeta para tu proyecto. |
Minutos 5-15: Escribe el prompt. Decide qué quieres construir. Una calculadora, una landing, un dashboard. Sé concreto en el prompt: qué hace, qué incluye, cómo se ve. Lánzalo y deja que Claude trabaje. |
Minutos 15-25: Itera. Abre la web en el navegador. Anota todo lo que cambiarías. Vuelve a Claude Code y pídele los cambios uno a uno. Refresca y comprueba. |
Minutos 25-30: Crea tu archivo CLAUDE.md. Para que la próxima vez Claude recuerde todo lo que has hecho. Y enseña tu creación a alguien. |
Al final de los 30 minutos, tendrás algo real, funcionando y útil. Y lo más importante: ya sabrás que cualquier idea que tengas se puede convertir en una herramienta real. |
|
|
Y con esto cerramos la serie |
Cuatro ediciones especiales. Empezamos enseñándote las seis herramientas de Claude. Seguimos explicándote cómo funciona por dentro y cómo hablarle. Te mostramos cómo automatizar tareas repetitivas con las Skills. Y hoy cerramos con la pieza que más impresiona: cómo crear cosas reales sin programar. |
Si has llegado hasta aquí, ya sabes más sobre Claude que el 99% de los profesionales que lo usan. En serio. |
|
|
¿Te ha parecido útil esta edición especial?Con tu respuesta nos ayudas a seguir mejorando cada día. |
|
|
No hay comentarios:
Publicar un comentario