Cómo usarlo con Claude Code
5 pasos1. Duplica el archivo y conecta el MCP de Figma.
En la terminal, dentro de tu proyecto:
claude mcp add --transport http figma https://mcp.figma.com/mcp
Abre una sesión nueva de Claude Code, escribe /mcp y autoriza tu cuenta de Figma.
2. Nombra lo que vas a entregar.
Claude Code lee los nombres de las capas. Un frame llamado Tarjeta / Guía dice qué es; uno llamado Frame 12 no dice nada. Usa los componentes de este archivo y cambia solo sus propiedades.
3. Pide las variables.
Selecciona el frame, copia su enlace (clic derecho → Copiar enlace a la selección) y pide:
Usa get_variable_defs con este enlace y escribe tokens.css con los mismos nombres: color/texto pasa a --color-texto.
Para el modo oscuro, copia el enlace del bloque «Oscuro» del mismo componente y pide:
Usa get_variable_defs con este enlace y pon esos valores en @media (prefers-color-scheme: dark), con los mismos nombres.
4. Pide el diseño.
Usa get_design_context con este enlace y arma el componente usando solo las variables de tokens.css. Si falta una, dímelo en vez de inventar un color.
5. Revisa el contraste en los dos modos.
Mide el contraste de cada texto sobre su fondo, en claro y en oscuro: 4,5:1 para texto y 3:1 para bordes y foco.
La página Variables tiene los valores medidos; si cambias un color, vuelve a medirlo.
Plugin gratis: github.com/Clagoss/claude-code-para-disenadores · Kit completo: carloslagos.gumroad.com/l/del-figma-a-produccion