Objectiu del bloc
Transformar un Design System en un asset reutilitzable per agents d'IA, creant skills que generin codi consistent amb la marca.
Conceptes clau
Anatomia d'un Design System moderni 25 min
Documenting Design Tokens per a IA 30 min
Component APIs per a generació automàtica 25 min
Validació de codi generat contra DS 20 min
Temps total: 3h
Contingut detallat
Un Design System és molt més que estàtica visual. Quan el documentes correctament per a IA, es converteix en una skills reutilitzable que multiplica la velocitat de delivery.
Design System com a Contract
En lloc de “aquestes són les directrius”, pensem: “aquesta és l’API visual de la marca”.
{
"colors": { "primary": "#D63B3B", "secondary": "#DC0000" },
"typography": { "h1": { "size": "2.5rem", "weight": 700 } },
"components": { "Button": { "variants": ["primary", "secondary"] } }
}
Beneficis
- Codi generat sempre compleix amb marca
- Onboarding de nous developers més ràpid
- Validació automàtica
- Evolució controlada del DS
- Reutilització entre projectes
Evolució del DS
Quan l’equip agrega nous components, el DS es’actualitza, i tots els agents IA accedeixen immediatament als nous tokens.
✏️ Design System com a MCP Server
Construcció d'un servidor MCP que exposa el Design System (colors, tipografia, components) de forma que agents IA puguin consultar-lo i generar codi que compleix automàticament amb les directives visuales.
Comandos i exemples
Crear servidor MCP per a Design System
npm init @modelcontextprotocol/server design-system-mcp Definir Design Token API
server.resource('design-tokens', async () => {
return {
colors: { elink: '#D63B3B', ... },
typography: { h1: { size: '2.5rem', weight: 700 }, ... },
components: ['Button', 'Card', 'Modal', ...]
};
}); Generar component amb validació
ai-generate --component=Button --design-system=ds-mcp://design-tokensVisualitzacions
✓ Artefactes que hauries de tenir
- • Design System documentat en format executable
- • Servidor MCP de Design Tokens
- • Skills personalitzats de generació de components
- • Tests automàtics de conformitat