Cómo se trabaja aquÃ
No necesitas programar ni memorizar comandos. Este proyecto se maneja hablándole a la IA (Claude Code) en español, dentro del editor. Le dices qué quieres y ella ejecuta sola los scripts necesarios.
Por ejemplo, frases como estas funcionan tal cual:
Los pasos de abajo te dicen qué escribirle en cada momento.
1. Arrancar el entorno
Antes de empezar (una vez)
Necesitas dos cosas instaladas: Node.js 18+ (desde nodejs.org) y Claude Code (la IA, en tu editor). Y tener el proyecto en tu equipo — si aún no lo tienes, clónalo una sola vez:
git clone https://github.com/seb-creativos/mockups-system.gitCon el proyecto abierto en Claude Code, no hace falta ningún comando. EscrÃbele:
La IA hace sola todo lo necesario (instalar, compilar los estilos y levantar el servidor) y te deja el sitio en marcha:
- →
http://localhost:3000/— esta guÃa - →
http://localhost:3000/admin/— panel de comentarios
La base de datos de comentarios ya está configurada — no hay que tocar nada. Cuando termines, dile "para el servidor".
2. Buscar referencias
Antes de crear, inspira tu dirección visual en webs reales. Usa estas galerÃas:
Benchmark de calidad en diseño web. Filtra por "Animation", "Interaction".
Curación de motion design y animaciones web. Muy inspirador.
Tutoriales técnicos de GSAP, CSS avanzado, WebGL. Referencia.
3. Crear proyecto
Para empezar un mockup nuevo, dÃselo a la IA con el nombre del cliente:
La IA genera public/cliente-z/index.html con todo el stack ya montado:
- ✓ Tailwind CSS importado y listo
- ✓ GSAP + ScrollTrigger + SplitText via CDN
- ✓ Lenis para smooth scroll
- ✓ Overlay de comentarios (💬 botón flotante)
- ✓ Meta tags accesibles y SEO correcto
4. Prompts efectivos con Claude
Para sacar el mejor resultado, sigue estas prácticas:
Incluir referencia visual
"Hazlo como la sección hero de [URL], pero con colores [especificar]"
Especificar dispositivo
"Para mobile-first" / "Solo desktop" / "Full responsive"
Describir emoción
"Que transmita lujo, lentitud, peso" / "Energético, rápido, ligero"
Pedir variantes
"Dame 2 opciones: una conservadora y una más arriesgada"
Referir agente si sabes cuál
"Usa el agente scroll-storyteller para la narrativa" / "Agente Three.js para el fondo 3D"
5. Ciclo de animación
Claude elige automáticamente qué agente usar según la tarea. Referencia:
| Tarea | Agente |
|---|---|
| Timelines GSAP, staggers, ScrollTrigger avanzado | gsap-animator |
| Narrativas de scroll, sticky sections, cinematografÃa | scroll-storyteller |
| Escenas 3D, WebGL, shaders, Three.js | threejs-scene |
| clip-path, CSS vars, blend modes, View Transitions | css-motion |
| Responsive design, accesibilidad, Core Web Vitals, performance | frontend-best-practices |
| Análisis de bundle, optimización JS/CSS, assets | bundle-optimizer |
| PostgreSQL, Neon, schema design, queries, RLS | neon-postgres |
| Scaffold, Tailwind, HTML, Neon, admin | Respuesta directa |
No necesitas mencionar los agentes — Claude los invocará automáticamente.
6. Publicar y compartir
Cuando el mockup esté listo para que lo vea el cliente, pÃdeselo a la IA:
La IA hace el commit y el push por ti. Cloudflare Pages detecta el cambio y publica solo en ~30s.
URL resultante: mockups-system.pages.dev/cliente-z/ (o tu dominio propio si lo conectaste a Cloudflare).
7. Gestión de comentarios
El cliente puede dejar comentarios visuales en el mockup:
- Cliente: Click en el botón 💬 flotante → entra en modo comentario
- Cliente: Click en la página donde quiere comentar → pin numerado + modal
- Cliente: Escribe texto → submit
- Tú: Entras a /admin/ y ves todos los comentarios agrupados
- Tú: Iteras con Claude, pusheas cambios
- Tú: Marcas comentarios como "resueltos" en el admin