|
|
|
|
¡Buenas! Esta semana toca el nivel gordo: Claude Code. |
Aviso rápido: esto no es un tutorial de "hazte rico con IA". Cada semana vemos posts de gente vendiendo apps que hicieron en un fin de semana como si fuera oro. Casi todo eso es humo. Montar una startup sigue siendo tan difícil como siempre. |
Lo que sí es real: hoy puedes construir cosas que antes te costaban semanas o miles de euros a un desarrollador. En tu tarde. En español. Sin escribir una línea de código. A eso se le llama vibecoding. |
¿Para qué sirve de verdad? |
Para montarte una landing tuya en una tarde en vez de pelearte con Wix. Para hacerte una herramienta interna que resuelva un tostón que arrastras cada semana. Para enseñarle a un desarrollador o a un diseñador exactamente qué quieres con algo clicable, no con un párrafo confuso.
|
Hoy te enseñamos a montar Claude Code, el mega-prompt que hace la magia, un truco para que lo que construyas no parezca "hecho con IA", y un ejemplo real: una landing tipo "reserva una llamada conmigo", funcionando y en internet al final de la edición. |
Vamos. |
|
|
⚙️ Paso 1: Montaje básico de Claude Code |
Siete pasos. Diez minutos. |
|
|
1. Descarga la app de escritorio desde claude.com/download. Necesitas plan de pago (Pro, 20€/mes vale para empezar). Abre la pestaña Code. |
2. Crea una carpeta limpia en tu ordenador solo para esto. Llámala claude-code o como quieras. Importante: que no tenga archivos privados dentro. Claude solo trabaja en esa carpeta, así que le das acceso a esa y a nada más. |
|
|
3. Activa el modo "sin permisos". Ve a Ajustes → Claude Code → Activar modo bypass de permisos. Sin esto, Claude te pregunta permiso antes de cada acción y acabas haciendo clic 30 veces por sesión. Con esto, trabaja solo mientras tú haces otra cosa. |
⚠️ Si trabajas en una empresa grande, consulta con IT antes de activarlo. |
|
|
4. Conecta Netlify y Supabase (ambos gratis para empezar). Son las dos herramientas que hacen que lo que construyas se pueda publicar en internet (Netlify) y tenga una base de datos con login de usuarios (Supabase). En Claude, ve a Ajustes → Conectores → Añadir conector, busca los dos y autoriza el acceso con tu cuenta de Google. |
|
|
5. Selecciona tu carpeta. Dentro de Code, pulsa el "+" y elige la carpeta que creaste en el paso 2. |
6. Elige el modelo. Selecciona Opus con effort High (arriba a la derecha). Es el más potente, ideal para esto. |
7. Listo. Ya puedes construir. |
|
|
✨ Paso 2: El mega-prompt |
Este es el prompt que hace la magia. Cópialo tal cual, pégalo en Claude Code al inicio, y solo tienes que rellenar la parte entre corchetes con lo que quieres construir. |
Para el ejemplo de hoy, vamos a montar una landing donde la gente pueda reservar una llamada de 30 minutos contigo: |
Eres mi CTO. Yo soy el CEO. No sé código y no quiero leerlo.
El modo bypass de permisos está activado, así que no me pares
a pedir permiso técnico. Solo constrúyelo.
Háblame en español claro, solo de lo que puedo ver, clicar o
decidir. Nada de código, nada de jerga.
Quiero: una página sencilla donde la gente pueda reservar una
llamada de 30 minutos conmigo. Tiene que verse profesional,
funcionar en móvil y estar en internet cuando terminemos.
Antes de construir nada, entrevístame. Hazme todas las preguntas
que necesites, una a una, usando la herramienta AskUserQuestion
para que pueda clicar mis respuestas. Céntrate en QUÉ hace la
página y CÓMO se ve. Las decisiones técnicas las tomas tú.
Cuando tengas suficiente, dime el plan en unas frases claras
y ponte a construir.
Usa Netlify para publicarlo en internet y darme un enlace que
cualquiera pueda abrir.
Usa Supabase para guardar las reservas y añade login con Google,
con Row Level Security activado para que cada persona solo vea
sus datos.
Construye pieza por pieza. Después de cada una, ábrela tú
mismo, comprueba que funciona (también en móvil), arregla lo
que esté mal, y solo entonces me enseñas.
|
|
|
Claude te va a hacer entre 5 y 10 preguntas: colores, estilo, si quieres tema oscuro, dónde recibes las reservas, si quieres sincronizar con tu calendario. Tú vas clicando o escribiendo respuestas cortas. |
Y después construye. En serio. Empieza a montar la página, la publica en internet, y te da un enlace. |
|
|
Entre 15 y 30 minutos. Tienes una landing tuya, funcionando, con URL propia. |
💡 Después de la primera versión, itera. Abre la web, mira lo que no te gusta, y escríbelo tal cual en una lista numerada: "1. el titular está demasiado pequeño, 2. el botón debería ser morado, 3. añade una sección de testimonios". Pégalo y Claude lo arregla todo de golpe. Vas a hacer entre 5 y 10 iteraciones por página. Es normal. |
|
|
|
|
🎨 Paso 3: Que no parezca "hecha con IA" |
Aquí está el problema. Todo el mundo está vibecodeando ahora mismo, y las webs empiezan a parecerse todas: el mismo azul, la misma tipografía, la misma estructura genérica. |
Hay un truco. Se llama DESIGN.md. |
Es un archivo de texto plano que contiene un sistema de diseño completo (colores exactos, tipografías, espaciados, reglas). Se lo pasas a Claude, le dices "usa esto para todo el estilo", y toda tu web se ve como si la hubiera diseñado un profesional siguiendo la línea gráfica de una marca real. |
¿Y la parte buena? No tienes que escribir el archivo. Ya existen los DESIGN.md de marcas famosas (Stripe, Notion, Airbnb, Linear) listos para descargar. |
|
|
Cómo aplicarlo: |
Ve a getdesign.md (gratis, no estamos afiliados). Busca una marca cuya estética te guste (Stripe, Notion, Linear, la que sea). Descarga el archivo DESIGN.md. Arrástralo dentro de tu carpeta de Claude Code. Dile a Claude: "usa el archivo DESIGN.md para todo el estilo visual de la web".
|
Y de repente tu landing se ve como si Stripe hubiera montado tu negocio. |
|
|
Otra opción: si conoces una web que te gusta, hazle captura, arrástrala a Claude y dile "que se parezca a esto pero para mi negocio". Funciona igual de bien. |
|
|
⚠️ Ojo con esto |
Cinco avisos honestos: |
No lo uses para todo. Para un texto largo o una hoja de cálculo, usa Cowork. Para una imagen suelta, usa un generador de imágenes. Claude Code es para construir cosas interactivas (webs, apps, herramientas). Vibecoding gasta muchos créditos. Cada mensaje reenvía la conversación entera más todos los archivos que Claude ha visto. Las sesiones largas se comen tu cuota rápido. Empieza cada tarea en un chat nuevo. No confundas construir con usar. Hay gente que se pasa cinco horas vibecodeando una herramienta que luego no usa nunca. Es productividad performativa. Solo construye lo que vas a usar. Para algo profesional, contrata un dev. Si tu proyecto va a manejar datos sensibles de miles de usuarios, un profesional. Claude Code hace prototipos y herramientas internas, no productos de producción con miles de clientes de pago. La estética por defecto delata. Si no aplicas DESIGN.md o das referencias visuales, se nota a la legua que es una web hecha con IA. La diferencia entre parecer amateur y parecer profesional son cinco minutos de trabajo extra.
|
|
|
🗳️ ¿Qué vas a construir? |
|
|
Cuéntanos. Nos sirve para saber por dónde tirar la próxima. |
|
|
Te contamos la próxima novedad de Claude el miércoles que viene 😎 |
Edu, Rai y Albert. El equipo humano detrás de Digital Brain. |
|
|
|
|
|
No hay comentarios:
Publicar un comentario