Sitios web con Lovable + Claude Code

Antes de empezar

Hace casi un ano hicimos el sitio de nuestro primer cliente importante, una consultora en Canada. Tres semanas arrastrando bloques en Go High Level. Homepage y ocho subpaginas, una por servicio.

Hoy un sitio asi lo hacemos en 3 dias. No porque seamos mas rapidos, sino porque cambiamos el stack.

Este es el proceso exacto.

El resumen, rapido

Stack:

• Lovable: arranque visual, v1 rapido, integra Supabase o Shopify si hace falta.
• Claude Code: motor cuando sube la complejidad o quieres mas control.
• /impeccable: skill open-source que le ensena a Claude diseno de verdad.

Datos clave:

• Tiempo: ~3 dias para un sitio tipo brand, landing o portfolio.
• Costo: Lovable free para arrancar, Claude Code free, /impeccable gratis.
• Requiere: Lovable + Claude Code + Node.js.
• Dominio aparte: ~$15 USD al ano.

El flujo:

Lovable (v1 visual) → Claude Code → /impeccable document → critique → live → polish → deploy

Por que /impeccable y no solo Claude Code

Claude Code solo te genera un sitio. /impeccable te ayuda a generar un sitio que no parece hecho por IA.

El problema: los modelos caen en los mismos vicios visuales. Cremas con serif, bento boxes para features, gradientes morados sin razon, glassmorphism generico.

Lo que hace Claude Code sin /impeccable:

• Hero generico.
• 4 bento boxes.
• Inter como fuente para todo.
• Dos CTAs del mismo peso.
• Paleta crema + morado.
• Animaciones de fondo que compiten con contenido.

Lo que hace Claude Code con /impeccable:

• Carga referencias de diseno.
• Usa terminologia real de disenador.
• Detecta anti-patrones de IA.
• Puede entregar variantes conceptualmente distintas.

Lo que necesitas tener listo

• Cuenta en Lovable: lovable.dev.
• Claude Code instalado: claude.com/code.
• Node.js / npm instalado: nodejs.org.
• Tu brandbook: opcional, pero recomendado.
• Tu dominio: opcional al inicio.

Paso 1: arranca la v1 en Lovable

Tiempo: 15-30 min

Tool: Lovable

Output: Primera version navegable

1. Entra a lovable.dev y crea un proyecto nuevo.
2. En el prompt inicial, dale contexto:

• Que hace tu negocio.
• A quien le hablas.
• Estilo visual que buscas.
• Que quieres que la gente haga al entrar.

1. Deja que Lovable arme la primera version.
2. Si Lovable pregunta por Supabase o Shopify, dile que si si tu sitio lo necesita.

Paso 2: itera lo basico en Lovable

Tiempo: 30-60 min

Tool: Lovable, chat lateral

Output: Sitio funcional con tu marca

Desde el chat de Lovable, pide cambios uno por uno:

• Hero section.
• Secciones principales.
• Navegacion.
• Paginas internas.
• Imagenes y contenido.

Paso 3: baja el codigo y abrelo en Claude Code

Tiempo: 10 min

Tool: Lovable + Claude Code

1. En Lovable, ve a Settings → GitHub y conecta tu cuenta.
2. Lovable crea un repo con tu proyecto.
3. Clonalo:

git clone https://github.com/tu-usuario/tu-proyecto.git
cd tu-proyecto
npm install
npm run dev

1. Abre la carpeta en Claude Code.
2. Claude Code leera el proyecto.

Paso 4: instala /impeccable

Tiempo: 2 min

Dentro del directorio del proyecto:

npx skills add pbakaus/impeccable

Alternativa para Claude Code:

/plugin marketplace add pbakaus/impeccable

Luego dentro de Claude Code:

/plugin

Y seleccionas impeccable.

Los AI slop mas comunes que detecta

Color y efectos:

• Gradientes morados genericos.
• Glassmorphism sin proposito.
• Paletas predecibles.

Tarjetas y estructura:

• Cajas dentro de cajas.
• Grid de 4 cajitas estilo bento.
• Tarjetas con franja lateral.
• Iconos genericos.

Tipografia:

• Inter para todo.
• Serif en cursiva gigante intentando verse premium.
• Etiquetas en mayusculas arriba del titulo.
• Texto gris claro que no se lee.

UX:

• Dos CTAs con el mismo peso.
• Movimiento de fondo que distrae.
• Varios estilos visuales peleandose en la misma seccion.

Paso 5: auditoria con /impeccable document y critique

En Claude Code:

/impeccable document

Esto hace reverse-engineering del codigo y crea un DESIGN.md con el design system actual.

Luego:

/impeccable critique

Te entrega un reporte con score sobre 40. Te dice exactamente que esta mal y por que.

Paso 6: modo live

En Claude Code:

/impeccable live

Abre tu sitio en localhost. En el browser:

1. Hover sobre cualquier componente.
2. Pide variantes como bolder, quieter, delight o polish.
3. Ajusta intensidad.
4. Dale Accept para escribir cambios directo al codigo.

Paso 7: comandos especificos

Cuando algo no cuadra:

/impeccable typeset    → arregla tipografia
/impeccable colorize   → arregla paleta
/impeccable layout     → spacing y estructura
/impeccable animate    → motion
/impeccable harden     → edge cases
/impeccable polish     → pasada final

Usalos uno por uno. Si pides todos seguidos, Claude empieza a deshacer cambios buenos.

Paso 8: deploy

Dos opciones:

Opcion A, Lovable

Si pagas Lovable, hostea ahi:

1. Settings → Domains.
2. Compra o conecta dominio.
3. Listo.

Opcion B, Vercel

npm i -g vercel
vercel

Vercel te guia, conecta repo y deploya.

Checklist final

• El sitio se ve bien en celular.
• Todas las paginas internas cargan.
• Los formularios funcionan.
• Los links no estan rotos.
• La velocidad de carga es decente.
• El SEO basico esta.
• Tienes favicon.
• El dominio apunta correcto.

Recursos

• Lovable: lovable.dev
• Claude Code: claude.com/code
• /impeccable: impeccable.style
• GitHub de /impeccable: github.com/pbakaus/impeccable
• Vercel: vercel.com

Hazlo Tuyo IA, Mel & Erik

*Hazlo tuyo... con IA.*