Lista de comprobación

Esta lista resume el vínculo entre diseño y código: el entregable, los pasos para producirlo y los criterios para darlo por terminado. Aplícala a cada componente que conectes.

En esta página

• El entregable
• Pasos
• Criterios para darlo por terminado
• En resumen

El entregable

• Los componentes del alcance conectados con Code Connect, cada uno con sus instrucciones para el MCP.
• Si usas Storybook con React: el servidor MCP instalado, el manifiesto activado y @summary en los componentes del alcance.
• La columna Code Connect de inventory.md al día.

Code Connect pide Figma Professional o superior, con asiento Full o Dev (Requisitos).

Pasos

1. Conecta cada componente en Code Connect UI (Mapear propiedades), o con un archivo de plantilla si necesitas fragmentos exactos.
2. Añade a cada conexión sus instrucciones para el MCP, resumidas desde la sección Reglas de su documento (Instrucciones para el MCP).
3. En un marco con varios componentes del alcance, pide get_code_connect_map y revisa cada instancia (Comprobar con el MCP).
4. Si usas Storybook: instala el MCP, activa el manifiesto y escribe el JSDoc (Storybook y su MCP, JSDoc para agentes).
5. Actualiza inventory.md.

Criterios para darlo por terminado

• get_code_connect_map devuelve el componente de código de cada instancia del alcance.
• El fragmento importa desde la ruta correcta.
• Las instrucciones aparecen en la respuesta del servidor MCP junto al fragmento.
• Si usas Storybook, docs-show devuelve las props del componente con sus descripciones.

En resumen

• El entregable son componentes conectados con su código, cada uno con sus reglas para el agente.
• Storybook añade las props y los ejemplos de uso si trabajas con React.
• La fase está terminada cuando el MCP devuelve el componente real y sus instrucciones.

Fuentes

Esta lista resume las páginas del capítulo. Las fuentes están en cada una de ellas.