¿Y si te dijera que una sola línea de código puede generar una web de $10K?
Suena exagerado pero no lo es. El combo que vamos a ver — Claude Code + Framer Motion + un skill de UI/UX + 21st.dev — te genera un sitio web profesional completo desde la terminal en menos de una hora. Diseño limpio, animaciones fluidas, estructura impecable.
Lo loco no es que funcione: es cuánto te ahorra. Lo que antes era una semana de trabajo de un freelance senior, hoy lo armás vos solo con cuatro pasos.
¿Por qué este stack y no otro?
Cualquiera puede generar HTML con IA. La diferencia entre eso y una web que parece hecha por un estudio profesional son tres cosas:
- Estructura — la web tiene secciones bien jerarquizadas, no un scroll plano
- Animaciones — las transiciones se sienten orgánicas, no robóticas
- Componentes refinados — botones, cards y heroes que ya están battle-tested
Claude Code aporta el cerebro que pega todo. Framer Motion las animaciones. El skill de UI/UX el ojo de diseñador. 21st.dev los componentes ya pulidos. Combinados, eliminás todas las fricciones.
Paso 1 — Instalá Claude Code
Si nunca lo usaste, Claude Code es la versión de Claude que corre en tu terminal y trabaja con archivos reales. Lo instalás con una línea:
npm install -g @anthropic-ai/claude-code
O bajás el desktop app desde claude.ai/download. Después abrís la carpeta donde querés tu proyecto y lanzás claude en la terminal. Eso es todo.
Si querés entender cómo arrancar bien antes de tirar prompts a lo loco, te recomiendo leer 3 cosas que hacer antes de abrir Claude Code.
Paso 2 — Sumá Framer Motion
Framer Motion es la librería de animaciones del ecosistema React. Sin ella, Claude te genera animaciones CSS básicas que quedan choclas. Con ella, podés pedir transiciones complejas (stagger, parallax, scroll-triggered) y el modelo las escribe directo.
Instalación dentro del proyecto:
npm install framer-motion
Cuando Claude detecta que está instalada, la usa por default en cualquier componente que armes. No hay que pedirle nada especial.
Paso 3 — Bajá un skill de UI/UX
Un skill en Claude Code es un archivo de instrucciones que le da contexto extra al modelo sobre un dominio. Hay skills gratis open source de UI/UX que le enseñan a Claude principios de diseño: spacing consistente, escala tipográfica, jerarquía visual, paletas que combinen.
Sin el skill, Claude te diseña algo que funciona pero se nota que es genérico. Con el skill activo, el output parece hecho por un estudio.
Lo bajás del repo correspondiente, lo metés en .claude/skills/ de tu proyecto, y le decís a Claude "usá el skill de UI/UX para todo lo visual". Listo.
Paso 4 — Pegá un componente de 21st.dev
21st.dev tiene un catálogo de componentes UI listos: heroes, dashboards, pricing tables, testimonios. Cada uno se copia con una línea de código.
Vas al sitio, elegís el componente que querés (digamos un hero), copiás la línea que te da, y la pegás en Claude Code:
npx 21st.dev/cli@latest add hero/animated-hero
Claude lee el comando, instala las dependencias, ajusta los imports y conecta el componente con el resto de tu sitio. En 30 segundos tenés un hero profesional andando.
Lo repetís para cada sección (hero, features, pricing, footer) y la web está armada.
Comparativa: cómo se sentía antes vs ahora
| Workflow tradicional | Stack Claude Code | |
|---|---|---|
| Tiempo para una landing | 5-7 días con dev senior | 1-2 horas |
| Costo | $5K-$15K USD | menos de $30 USD/mes |
| Iteración | Cada cambio = ticket nuevo | Tiempo real, conversacional |
| Animaciones | Hay que diseñarlas y codearlas | Pedís y aparecen |
| Componentes | Diseñar desde cero o Figma | Copy-paste de catálogo |
¿Cómo arranco hoy?
- Instalá Claude Code (
npm install -g @anthropic-ai/claude-code) - Creá una carpeta nueva, lanzá
claudeadentro - Instalá Framer Motion (
npm install framer-motion) - Cargá el skill de UI/UX en
.claude/skills/ - Andá a 21st.dev, elegí un hero, copiá la línea
- Pegala en Claude Code y mirá cómo te arma la web
En la primera sesión vas a entender por qué este combo está cambiando cómo se hace front. Si lo querés implementar en tu marca o agencia, reservá una call de 20 minutos.
Links útiles
- Claude Code (oficial): claude.ai/download
- Documentación Claude Code: docs.anthropic.com
- 21st.dev: 21st.dev
- Framer Motion: framer.com/motion
- Reel referencia: Instagram
- Guías relacionadas: 5 herramientas pro de Claude Code, 3 cosas antes de abrir Claude Code, Cómo planificar proyectos en Claude Code
¿Querés que te ayudemos a armar tu sitio con este stack en una sesión guiada? Reservá acá.
Preguntas frecuentes sobre armar web con Claude Code
Claude Code es la versión de Claude que vive en tu terminal y trabaja con archivos reales de tu computadora. A diferencia del chat web, donde le pegás snippets, acá le das acceso a una carpeta entera y el modelo lee, modifica y crea archivos directamente. Soporta sesiones largas, sub-agentes en paralelo y se integra con tu stack (git, npm, postgres). Para arrancar bajás la app desde el sitio oficial o ejecutás npm install -g @anthropic-ai/claude-code en la terminal. Después abrís la carpeta del proyecto, le pasás el primer prompt y empezás. Si querés contexto previo de cómo planificar antes de tirar prompts, mirá la guía sobre 3 cosas que hacer antes de abrir Claude Code, que te ahorra muchas horas.
21st.dev es una biblioteca de componentes UI listos para producción que te permite copiar una línea de código por componente y pegarlo en tu proyecto. Tiene desde hero sections hasta dashboards completos, todos basados en shadcn/ui y Tailwind. La gracia con Claude Code es que cuando le pasás esa línea, el modelo entiende qué componente es, lo instala, ajusta los imports, y lo conecta con el resto de la web. No tenés que copiar archivos a mano ni resolver dependencias. El combo elimina la fricción entre "encuentro un componente lindo" y "lo tengo funcionando en mi sitio". Para ver más herramientas que potencian Claude Code, te recomendamos la guía de 5 herramientas pro de Claude Code, que cubre el ecosistema completo.
Claude puede generar CSS animado básico, pero las animaciones que hacen que una web se vea profesional (fade-ins escalonados, parallax, micro-interacciones en hover) requieren una librería dedicada. Framer Motion es el estándar en el ecosistema React: tiene una API declarativa que Claude entiende perfecto, y soporta scroll-triggered animations, layout transitions y gestures. Cuando lo tenés instalado, le decís a Claude "agregale entrada con stagger" y el modelo escribe el código directo. Sin Framer, te toca animar a mano con keyframes de CSS, que es 5x más código y queda peor. La instalación es npm install framer-motion y listo. Para ver más combos de Claude Code con librerías que lo potencian, mirá la guía de 3 cosas que hacer antes de abrir Claude Code.
Un skill en Claude Code es un archivo de instrucciones que le da contexto adicional al modelo sobre un dominio específico. Un skill de UI/UX le enseña principios de diseño: jerarquía visual, escala tipográfica, spacing system, paleta cromática, patrones de layout. Sin ese skill, Claude diseña "como un dev" — funciona, pero se nota que es genérico. Con el skill activo, el modelo aplica reglas de diseño profesional automáticamente: el hero queda con la proporción correcta, los CTAs tienen el contraste justo, el spacing es consistente. Hay varios skills gratis open source en GitHub. Si querés ver cómo armar tus propios skills personalizados, te conviene la guía sobre el archivo CLAUDE.md que cubre los principios base.
El stack en sí es prácticamente gratis. Claude Code tiene plan gratis con uso limitado y plan Pro a 20 USD por mes con uso pesado. Framer Motion es open source. 21st.dev tiene componentes gratis y un plan pago opcional para acceder al catálogo completo. El skill de UI/UX lo bajás de GitHub gratis. La diferencia con contratar un estudio (que te cobra entre 5K y 15K USD por una web a medida) es brutal: vos podés tener algo equivalente en una tarde, iterando en tiempo real. Lo único que cuesta es la curva inicial de aprendizaje, que se amortiza en el primer proyecto. Si querés que te ayudemos a setearlo en tu negocio, reservá una call de 20 minutos.
Fuentes e inspiración
Mirá los posts originales donde desarrollamos estas ideas en redes.
