Sin editor visual, sin Figma, sin mover el mouse. Solo prompts, skills, MCPs y un server local en el puerto 8765. Esto es cómo se hizo hit.altermundi.net.
Claude Code como orquestador, y una serie de skills y MCPs que extienden lo que el modelo puede hacer sin intervención manual.
CLI oficial de Anthropic. Opus 4.6 con 1M de contexto, herramientas de file-edit, bash y subagentes nativos.
core ↗Skill con 67 estilos, 161 paletas y 57 pairings tipográficos. Consultada antes de tocar una sola línea de CSS.
skill · nextlevelbuilder ↗Set oficial de GreenSock para agentes: core, ScrollTrigger, Timeline, React, Performance, Plugins. useGSAP() siempre sobre useEffect().
Registro de componentes UI instalables con npx shadcn add. Evita escribir botones, menús y modales desde cero.
Diseño-a-código desde prompt o imagen. Útil cuando querés una idea visual bajada rápido a HTML/React.
mcp · google ↗Generación y edición de imágenes con Gemini 2.5 Flash Image. Assets visuales sin salir del flujo.
mcp · gemini ↗Regla interna: nunca definir color o tipografía sin consultar UI/UX Pro Max. El resultado es un sistema mínimo que sostiene toda la web.
Todo sucedió en sesiones iterativas. Editar, ver el cambio en localhost:8765, corregir, commit, push.
claude en la terminalAbrir Claude Code con claude dentro de ~/web/book. Context loading automático del CLAUDE.md del proyecto: reglas del stack web, skills activas, memoria persistente.
python3 search.py "dark minimal landing" --domain landing --stack html-tailwind. Devuelve referencias visuales y sistemas listos para adaptar. Recién después, definimos paleta y tipografía.
Para componentes UI: magic-21st. Para ideas rápidas visual-a-código: stitch. Para assets: nano-banana. Claude elige el adecuado y los encadena.
Regla: useGSAP() nunca useEffect(). Transforms (x, y, scale) siempre sobre propiedades que disparan layout. Respetar prefers-reduced-motion.
python3 -m http.server 8765 corriendo en segundo plano. Cada cambio de Claude abre xdg-open http://localhost:8765 automáticamente por regla guardada en memoria.
Mensajes de commit redactados por Claude con contexto. Push a AlterMundi/book, Pages sirve hit.altermundi.net. De idea a online en una sesión.
CLAUDE.mdReglas escritas en el archivo de contexto del proyecto. Claude las lee automáticamente al iniciar sesión.
Siempre consultar UI UX Pro Max antes de definir paleta o tipografía.
En animaciones, nunca useEffect(). Para controlar ciclo y cleanup correctamente.
Respetar prefers-reduced-motion en cada animación.
Preferir 21st.dev antes de escribir desde cero.
Animar con x, y, scale — nunca width, height, top.
Versión animada en HTML — 6 escenas, formato vertical 9:16. Lista para grabar con OBS y subir a Reels, TikTok o Shorts.
hit.altermundi.net
Landing bilingüe (EN/ES), navegación por tabs, equipo, explore, video NotebookLM, dos probes (Phideus · Harmonic Beacon). Construida entera desde la terminal.
Visitar hit.altermundi.net →