Contenido detallado
🎯 Copia lo que ya funciona: la estrategia de la ley de potencia
La mayor ventaja para construir un buen sitio no es tener una idea original, sino descubrir qué ya funciona y partir de ahí. Piensa en un chef que abre un restaurante: come en los mejores lugares de la ciudad, anota qué funciona y solo entonces arma su menú; queda mejor porque parte de lo que ya está validado.
Una forma de construir que parte de la observación, no de la imaginación. Analizas los sitios que ya dan resultados y extraes sus patrones.
Los sitios de referencia ya pasaron por años de ensayo y error. Heredas ese aprendizaje gratis y evitas reinventar la rueda.
"No reinventes la rueda" · extraer patrones (CTA, propósito, estructura) · usar IA para construir rápido a partir de lo validado.
🍽️ La analogía del chef
El sitio es el sistema de 3 pasos del módulo. Paso 1 — tú "comes en los mejores restaurantes" (investigas a la competencia). Paso 2 — se convierte en el mesero que anota el pedido (design brief). Paso 3 — cocina y sirve (construye y publica). Todo parte de lo que ya está comprobado.
🔎 Inteligencia competitiva: investigación + matriz de evaluación
Usa el Firecrawl dentro de Claude Code para encontrar y leer los sitios de la competencia de tu nicho. Así pasas de una lista amplia a un top 5 y preparas una matriz de evaluación que convierte las suposiciones en una tabla objetiva de calificaciones.
Extrae datos de la competencia con Firecrawl y califícala en una tabla según criterios (oferta, prueba social, claridad, diseño, SEO).
Es la materia prima de tu sitio. Sin esta base, construyes a ciegas. La matriz revela patrones que se repiten entre los ganadores.
Lista amplia → top 5 · fuentes (reseñas en Google, ranking de SEO, claridad de la oferta) · "qué tienen los 5 mejores que no tienen los 5 peores".
🪜 Paso a paso
- Crea una carpeta nueva (p. ej.:
website) y abre Claude Code en ella. - Conecta Firecrawl (firecrawl.dev) al agente.
- Envía el prompt de investigación de competidores (ver "Prompts listos").
- Responde las preguntas aclaratorias: quién es el cliente, cuál es el enfoque y cuál es la región.
- Recibe el informe con la lista, el top 5 y el análisis comparativo. Si llega sin formato, pide «crea un resumen en HTML de esta investigación».
📝 El brief de diseño estructurado (best-principles.md)
Convierte la investigación en un único documento: best-principles.md — donde pegas toda la investigación y los principios extraídos. El agente construye mucho mejor si lee un brief organizado que si recibe instrucciones sueltas en el chat.
Un archivo .md que se convierte en la fuente de verdad del proyecto: nombre, oferta, público, tono y principios de la investigación.
Un brief claro orienta sin limitar. Es el puente entre la investigación y lo que el agente va a construir.
Menos prescriptivo es mejor · dale libertad al agente · deja que la investigación guíe el precio y el posicionamiento.
✓ Hazlo así
- ✓Define la dirección: nombre, oferta, público, tono.
- ✓Pega toda la investigación del Paso 1 en el archivo.
- ✓Responde de forma general; deja espacio para tomar buenas decisiones.
✗ Evita
- ✗Llenar de reglas minuciosas que bloquean al agente.
- ✗Enviar instrucciones sueltas por chat, sin un documento.
- ✗Fijar el precio/la posición antes de que la investigación lo indique.
💡 Consejo práctico
Después de pegar la investigación, pide: "familiarízate con best-principles.md y avísame cuando entiendas el brief". Las preguntas que te haga el agente muestran si el brief está bien hecho.
🤖 Agentes paralelos: tres sitios a la vez
El mismo prompt genera resultados distintos en cada ejecución. En lugar de confiar en un único intento, abre varias terminales — cada uno con un Claude Code construyendo una versión con una estrategia distinta; y elige la ganadora.
Ejecutar versiones paralelas del sitio: a partir solo del brief, de un HTML de inspiración y de un sistema de diseño de referencia.
Comparas "sabores" y no dependes de un único resultado por mala suerte.
Terminales paralelas · carpetas separadas (1/, 2/, 3/) · tres estrategias · comparar y elegir.
Abre tres terminales
Renómbralos: «versión brief», «versión de inspiración HTML», «versión de sistema de diseño». Cada uno lee el best-principles.md.
Ejecuta estrategias diferentes
Pide que cada agente guarde su versión en una carpeta propia (1/, 2/, 3/).
Compara y elige
Abre cada versión en localhost, compáralas, conserva la mejor y elimina las demás.
✂️ UI sniping + SEO: detalles que convierten
Con la versión elegida, dale el acabado final. UI sniping es tomar componentes bonitos y listos de galerías e integrarlos; en paralelo, ejecuta paquetes de UI/UX y SEO para que el sitio sea accesible y pueda posicionarse.
Traer fragmentos de interfaz que ya demostraron funcionar (de 21st.dev, Codepen) y ejecutar al mismo tiempo un agente de UI/UX y otro de SEO.
Obtienes calidad visual de primer nivel sin dibujar desde cero, y un diseño bonito que nadie encuentra no convierte.
21st.dev e Codepen · integrar "debajo del H1" / "en la sección de testimonios" · paquetes de UI/UX y SEO en paralelo · informe con elementos marcados.
📊 Flujo de refinamiento
- •Elige un componente (testimonios, efecto de resaltado), copia el código y pídele al agente que lo integre y ajuste el texto.
- •En una terminal, ejecuta el paquete de UI/UX (contraste, tamaño de botón, navegación, móvil) "sin piedad".
- •En otro, ejecuta el paquete de SEO (palabras clave, copy, schema markup) sin tocar el diseño.
- •Pide un informe con todo marcado y haz la revisión crítica final.
Profundiza (opcional): usa solo lo que encaje
No todos los componentes atractivos sirven para tu negocio. Toma lo que refuerza el mensaje y descarta el resto. Las galerías de UI son un punto de partida, no una obligación: la coherencia vale más que la cantidad.
🚀 Deploy en Vercel: de localhost a la URL pública
Un sitio que solo está en tu computadora no le sirve a nadie. GitHub guarda el código (como un "guardado de videojuego": si algo se rompe, vuelves a la versión anterior) y el Vercel publica el sitio con una URL que puedes enviarle a cualquier persona.
Subir el proyecto a GitHub y conectarlo a Vercel para generar una URL accesible para cualquiera.
La URL pública es lo que envías a los clientes. Sin deploy, el sitio no existe para el mundo.
GitHub como copia de seguridad y «save state» · repositorio privado vs. público · Vercel se conecta a GitHub · dominio personalizado y redireccionamiento 301.
🪜 Paso a paso
- Pídele al agente que se conecte a GitHub vía CLI (o confirme si ya está conectado).
- Pide que cree un repositorio con todo el proyecto.
- Pide que se conecte a la CLI de Vercel.
- Pide: "publica esto en Vercel". Recibirás una URL pública.
- (Opcional) En Vercel, agrega un dominio personalizado y espera a que se propague.
Autoevaluación (opcional): ¿por qué construir el sitio en versiones paralelas?
✏️ Ejercicios
1. Investigación de competidores (medio)
Elige un nicho real y ejecuta el prompt de investigación con Firecrawl. Criterio: tienes una lista de los 5 principales y una matriz de evaluación completada.
2. Brief de diseño (medio)
Configura el best-principles.md con la investigación. Criterio: el agente confirma que entendió el brief y hace preguntas pertinentes.
3. Agentes paralelos (medio)
Construye tres versiones del sitio en carpetas separadas. Criterio: abres las tres en localhost y justificas cuál elegiste y por qué.
4. UI sniping (medio)
Integra al menos dos componentes de 21st.dev o Codepen, con el texto adaptado. Criterio: los componentes aparecen y tienen sentido en el contexto.
5. Deploy (difícil)
Publica en Vercel. Criterio: abres la URL pública en un navegador anónimo y el sitio carga.
⌨️ Prompts listos
Estos son los prompts clave del sistema de 3 pasos. Observa el tono: claro, en portugués, diciendo qué e para quién, y dejando espacio para que el agente decida bien. El banco completo está en la Biblioteca → Prompts.
Investigación de la competencia (Firecrawl)
¡Hola! Quiero crear un sitio web para una consultoría de crecimiento en línea que construye sitios web y ayuda a las empresas a conseguir clientes. En el fondo, necesita ser algo que ayude a las empresas a tener un sitio web que funcione. Lo que quiero que hagas: usa la conexión con Firecrawl y encuentra las consultorías y empresas constructoras de sitios web más destacadas y exitosas de mi mercado. Voy a trabajar en [REGIÓN], pero puede ser internacional. 1. Identifica una lista amplia de esas empresas. 2. Selecciona las 5 mejores. Puedes evaluarlas como te parezca: reseñas en Google, ranking SEO, claridad de la oferta, etc. Crea una matriz de evaluación que ayude a entender y puntuar a cada una. 3. Entrega un informe sobre las 5 mejores. 4. Haz un análisis profundo: ¿qué tienen en común las 5 mejores que NO tienen las 5 peores? Quiero usar esos principios para construir mi sitio web. Hazme las preguntas que necesites para aclarar lo que quiero.
Original (EN):
Hi! I'd like to create a website for an online growth consultancy that builds websites and helps businesses get customers. Fundamentally, it needs to be something that helps businesses get a website that works. What I'd like you to do: use the Firecrawl connection and find the very best, most successful website consultancies / website builders in my market. I'll be operating in [REGION], but this could be international. 1. Identify a large list of these. 2. Narrow it to the top 5. Assess them however you see fit — Google reviews, SEO ranking, offer clarity, etc. Build a judging matrix that helps you understand and score them. 3. Deliver a report of the 5 best. 4. Do a deep analysis: what do the 5 best have in common that the 5 worst do NOT? I want to use those principles to build mine. Ask me any questions you need to clarify your understanding.
Brief de diseño / construir a partir del best-principles.md
¡Hola! Quiero que te familiarices con el documento best-principles.md. Vamos a construir juntos un sitio web para [TIPO DE NEGOCIO]. Usa como base los principios extraídos de la investigación de la competencia. Sé menos prescriptivo que lo habitual: tienes libertad para decidir qué funciona mejor. Usa los mejores recursos y bibliotecas disponibles para que el sitio web sea lo más atractivo e interactivo posible. Avísame cuando hayas entendido el brief; entonces empezamos a construir.
Original (EN):
Hi! Please familiarize yourself with the best-principles.md document. We're going to build a website together for a [BUSINESS TYPE]. Use the principles extracted from the competitor research as your base. Be less prescriptive rather than more — you have freedom to decide what works best. Use the best resources and libraries available to make this as beautiful and interactive as possible. Let me know when you've understood the brief, then we'll start building.
UI sniping — integrar componente
Buen trabajo. Quiero que integres el componente de abajo [justo después del H1 / en la sección de testimonios] y ajustes el texto para que tenga sentido en nuestro sitio. Aquí tienes el código/URL del componente: [PEGA AQUÍ].
Deploy en Vercel
1. Conecte-se ao GitHub via CLI. Se já estiver conectado, apenas confirme. 2. Crie um repositório no GitHub com este projeto inteiro. 3. Conecte-se à CLI da Vercel. Se já estiver conectado, apenas confirme. 4. Publique este site na Vercel e me dê a URL pública.
Revisión crítica final
Quiero que actúes como un evaluador crítico y exigente. Recorre el sitio y encuentra inconsistencias, textos que no tienen sentido y mal diseño. Devuélveme una lista clasificada en crítico / alto / medio / bajo. No inventes errores críticos donde no los haya, pero revísalo de verdad para ayudarme a mejorar. Incluye cualquier repositorio/paquete relevante que ayude.
⚠️ Errores comunes
- ✗Ser demasiado prescriptivo en el brief. Llenar de reglas "bloquea" al agente y el resultado queda rígido. Dale dirección, pero deja espacio para buenas decisiones.
- ✗Construir una sola versión. El mismo prompt genera resultados distintos en cada ejecución. Con un solo intento, podrías quedarte con el peor por mala suerte.
- ✗Olvidar hacer que el sitio sea público/accesible. Un sitio solo en localhost no le sirve a nadie. Comprueba si el repositorio es privado o público y si usa HTTPS.
- ✗Saltarte el SEO y la accesibilidad. Un sitio hermoso que nadie encuentra (y que excluye a quienes tienen alguna limitación) no convierte. Ejecuta los paquetes antes de considerarlo listo.
- ✗Confiar ciegamente en el resultado. Siempre haz una revisión crítica final: copy, consistencia, propagación del dominio, enlaces rotos.
✅ Resumen del módulo
Lista de verificación de finalización
- ☐ Hice la investigación de la competencia con Firecrawl y tengo un informe de los 5 principales.
- ☐ Armé la matriz de evaluación con criterios y calificaciones.
- ☐ Creé el best-principles.md y el agente confirmó que entendió el brief.
- ☐ Construí 2–3 versiones en paralelo y elegí la mejor con una justificación.
- ☐ Apliqué UI sniping con al menos dos componentes integrados y ajustados.
- ☐ Ejecuté SEO y UI/UX y recibí los informes.
- ☐ Publiqué en Vercel y tengo una URL pública que se abre en un navegador anónimo.
Siguiente módulo:
2.2 — Creación de apps: del sitio estático a la primera aplicación interactiva