Empezar aquí
Qué contiene la guía
Las siete fases de la guía, la pregunta que responde cada una y el entregable con el que termina.
Última revisión:
La guía recorre siete fases en orden. Cada una termina con un entregable concreto, y la siguiente lo necesita para empezar. Puedes leerla entera la primera vez y volver después a la fase que te haga falta.
En esta página
- Las siete fases
- Qué entregable sale de cada fase
- Por dónde empezar
- Cómo se organiza cada página
- En resumen
Las siete fases
Preparar el sistema
Figma y documentos Markdown
Conectar con la IA
Repositorio de código
Qué entregable sale de cada fase
| Capítulo | Pregunta que responde | Entregable |
|---|---|---|
| 1. Auditoría | Qué tiene el sistema y en qué estado está cada pieza | inventory.md y una puntuación de madurez |
| 2. Preparar Figma | Si el archivo se puede leer como datos, no solo como dibujo | Librería con nombres, variables, descripciones, anotaciones y guidelines |
| 3. Tokens | Cuáles son las decisiones visuales y para qué sirve cada una | Tokens en formato DTCG con descripción en los semánticos |
| 4. Documentar | Cómo y cuándo se usa cada pieza | Carpeta docs/ en Markdown: fundamentos, componentes y patrones |
| 5. Diseño y código | Qué componente de código corresponde a cada componente de Figma | Code Connect con instrucciones para el MCP, y Storybook si usas React |
| 6. Capa de agente | Cómo encuentra un agente todo lo anterior | CLAUDE.md o AGENTS.md, skills, servidores MCP y el sistema publicado en Claude |
| 7. Evaluar y mantener | Si funciona y cómo se mantiene | Evaluaciones, proceso de contribución y changelog |
Todas las plantillas de los entregables están reunidas en Plantillas.
Por dónde empezar
Recomendación
No documentes todo el sistema de una vez. Elige un piloto de cinco componentes y dos patrones de pantalla, recorre con ellos las siete fases y mide el resultado. Con lo que aprendas, extiende el trabajo al resto del sistema.
Si tu sistema no tiene librería de código, los capítulos 1 a 4 siguen sirviendo: el agente de Figma y Claude Design también aprovechan una librería bien nombrada, con variables y guidelines. Los capítulos 5 y 6 dan su mejor resultado cuando existe un repositorio con los componentes.
Cómo se organiza cada página
Cada página sigue la misma estructura, heredada de DesignToken101:
- Una introducción breve y la lista "En esta página".
- El contenido, con cada afirmación enlazada a su fuente.
- Un bloque de Recomendación cuando lo que sigue es criterio nuestro y no de una fuente oficial.
- "En resumen", con tres ideas clave.
- Las fuentes de la página.
Cada capítulo termina con una lista de comprobación: el entregable de la fase, los pasos para producirlo y los criterios para darlo por terminado. Sirve para el piloto y para cada componente que prepares después.
En resumen
- La guía tiene siete fases: cuatro para preparar el sistema y tres para conectarlo con agentes.
- Cada fase termina con un entregable que necesita la siguiente.
- Empieza con un piloto pequeño y amplía cuando hayas medido el resultado.
Fuentes
Esta página describe la estructura de la guía. Las fuentes de cada fase están en sus capítulos.