De idea a prototipo en una tarde
Antes, pasar de una idea a un prototipo funcional me costaba una semana mínimo: wireframes, mockups, setup del proyecto, código, ajustes. Con Claude Code, ese proceso se ha comprimido a una tarde.
No es magia. Es un workflow nuevo que requiere aprender a pensar diferente.
El setup
Mi stack para prototipar:
- Claude Code en terminal (el cerebro)
- Astro como framework (velocidad y simplicidad)
- Tailwind CSS para estilos (utilidades, sin CSS custom)
- Un navegador con hot reload (el feedback)
Claude Code tiene acceso al sistema de archivos completo. Lee, escribe y modifica código. Entiende el contexto del proyecto entero, no solo el archivo que tienes abierto.
Paso 1: Describir, no diseñar
El primer cambio mental: en lugar de abrir Figma y mover rectángulos, empiezo describiendo lo que quiero en lenguaje natural.
No digo “crea un div con flex, gap-4 y un h2 de 24px”. Digo “necesito una sección de hero con un titular grande, un subtítulo y dos botones de acción. Estilo minimalista, mucho espacio en blanco.”
Claude Code interpreta la intención y genera una primera versión. Nunca es perfecta. Pero es un punto de partida real, no una página en blanco.
Paso 2: Iterar con feedback visual
Abro el navegador, veo el resultado y doy feedback específico:
- “El título necesita más peso visual, hazlo más grande”
- “Los botones están demasiado juntos en móvil”
- “Añade una imagen a la derecha como en esta referencia”
Cada iteración tarda segundos. El ciclo feedback → cambio → resultado es casi instantáneo.
Paso 3: Refinar con contexto
Aquí es donde Claude Code brilla frente a herramientas genéricas. Como tiene acceso a toda la codebase, las sugerencias son coherentes con el resto del proyecto:
- Usa los mismos tokens de color y tipografía
- Reutiliza componentes existentes
- Mantiene las convenciones del código
No estás generando código aislado — estás construyendo sobre lo que ya existe.
Paso 4: De prototipo a producción
La ventaja de prototipar en código real es que no hay “traducción” posterior. El prototipo ES el producto. Cuando estoy satisfecho con el resultado, solo falta:
- Conectar datos reales
- Pulir edge cases
- Testing en dispositivos
No hay fase de “ahora un developer tiene que implementar esto”. Ya está implementado.
Errores que cometí al principio
Ser demasiado vago: “Hazme una landing bonita” no funciona. Claude necesita dirección: estilo, referentes, contenido aproximado.
No revisar el código: Claude escribe buen código, pero no perfecto. Siempre reviso el output para asegurar que sigue las convenciones del proyecto.
Intentar hacerlo todo de golpe: Es mejor ir componente a componente que pedir una página entera. Más control, mejor resultado.
El resultado real
Este portfolio — el sitio que estás viendo ahora — fue prototipado íntegramente con este workflow. Cada página, cada componente, cada animación. No es un ejemplo teórico. Es la prueba.