DESARROLLO Y DISEÑO
DS4Agents
Rol y alcance
Ideación, investigación, curación de contenidos, Diseño UX/UI. Guía web abierta para documentar un sistema de diseño de Figma y conectarlo con agentes de IA, para que usen sus componentes, tokens y reglas en lugar de inventarlos.
Stack en contexto
Construida con el sistema de diseño de designtokens101: variables de Figma exportadas en formato DTCG y transformadas con Terrazzo en variables CSS y en el tema de Tailwind CSS v4. Desarrollada en Next.js y TypeScript, con las 53 páginas en MDX para escribir y versionar el contenido como archivos, y next-intl para dejarla preparada para más idiomas. GitHub Actions comprueba tokens, build y contenido en cada cambio, y Vercel se encarga del despliegue. Todo el trabajo en el repositorio se hace con Claude Code, aplicando la misma metodología que la guía enseña.
Tecnologías
Contexto y problema
Los agentes de IA ya generan interfaces, pero si el sistema de diseño no está documentado para que puedan leerlo, ignoran sus componentes y tokens y los reinventan. Figma, Anthropic y Storybook explican cada uno su herramienta, muchas en beta y cambiando cada pocos meses, pero ninguna el recorrido completo desde el sistema hasta el agente.
- Guía web
- Equipos de sistemas de diseño
- Agentes de IA
- Figma a código
El problema apareció al terminar designtokens101. Tenía un sistema con tokens en DTCG y componentes en código, y quería que Claude Code lo usara al construir pantallas. Cada fuente resolvía una pieza: Code Connect por un lado, el servidor MCP de Figma por otro, las guidelines de librería y los sistemas de diseño en Claude en beta, y casi nada sobre cómo encajarlas ni en qué orden. Ahí vi la oportunidad: convertir esa investigación en una guía ordenada, con cada afirmación enlazada a la documentación oficial, el criterio propio marcado como recomendación y la metodología probada sobre mi propio sistema antes de publicarla. Sin ese recorrido, los equipos conectan un agente a su Figma y obtienen pantallas con valores fijos, componentes duplicados y reglas que nadie le ha explicado.