La proliferación de agentes de inteligencia artificial como Claude Code ha revolucionado la capacidad de generar interfaces de usuario de manera rápida. Sin embargo, esta velocidad a menudo viene acompañada de un desafío significativo: la desconexión con los sistemas de diseño existentes. Un agente de IA puede crear una pantalla de configuración con una eficiencia notable, pero es probable que los componentes generados no se adhieran a la biblioteca de diseño ni a la jerarquía de tokens establecida por un equipo.

Este escenario es una realidad para muchos equipos de diseño que han invertido meses en construir una fuente de verdad para sus componentes y tokens de diseño. Cuando un agente de IA genera elementos con valores hexadecimales codificados o botones inventados, el sistema de diseño se omite por completo. Esto no sucede porque el agente sea incapaz de acceder a la biblioteca, sino porque carece de las "reglas" explícitas para utilizarla correctamente. Aquí es donde entra en juego la configuración de un sistema de diseño basado en Claude Skill, una solución diseñada para cerrar esta brecha.

¿Qué es un Claude Skill y cómo funciona?

Un Claude Skill es un conjunto de instrucciones en formato Markdown que capacita a un agente de IA, como Claude Code o Cursor, para ejecutar tareas específicas de la manera en que un equipo de diseño las abordaría. Este archivo, denominado SKILL.md, opera sin necesidad de un servidor o configuración de API. Las instrucciones se redactan una vez y el agente las carga en su contexto cuando la tarea lo requiere.

La distinción clave entre un Skill y una herramienta de Protocolo de Comunicación de Máquina (MCP) radica en su función. Las herramientas MCP otorgan al agente la capacidad de realizar acciones, como leer o escribir en un archivo de Figma. Un Skill, en cambio, instruye al agente sobre cómo y cuándo ejecutar esas acciones de manera efectiva. En esencia, si el servidor MCP de Figma proporciona las "llaves" a sus archivos, un Skill de sistema de diseño ofrece las "instrucciones de manejo".

Para los equipos de sistemas de diseño, esta diferenciación es crucial. En lugar de reiterar las convenciones en cada sesión, un Skill proporciona un conjunto estable de reglas que el agente debe seguir. Esto garantiza que el agente priorice la búsqueda en la biblioteca, vincule valores a tokens y utilice componentes existentes antes de crear nuevos. Los Skills son compatibles con Claude Code, Cursor y otros clientes compatibles con MCP que soportan el servidor MCP de Figma.

El problema que resuelven los Skills para equipos de diseño

El principal problema que enfrentan los equipos es la generación de componentes que, aunque visualmente aceptables, carecen de la integración con el sistema de tokens y componentes establecido. Por ejemplo, al solicitar un componente de tarjeta, el agente puede generarlo con espaciado y colores codificados, sin relación alguna con la biblioteca del equipo.

La capacidad no es el problema; el agente sabe cómo invocar la API de Figma y vincular una variable. Sin embargo, no sabe que, dentro del contexto del equipo, debe hacerlo. Esta regla no ha sido documentada de una manera que el agente pueda interpretar. La investigación de Figma, plasmada en su informe de IA de 2025, subraya la importancia de que más del 80% de diseñadores y desarrolladores consideren esencial aprender a trabajar con IA para su éxito futuro.

No obstante, la adopción sin las debidas salvaguardas puede generar complicaciones rápidamente. Un equipo que ha dedicado meses a construir una jerarquía de tokens y una biblioteca de componentes puede ver cómo cada pantalla generada por IA la elude por completo, hasta que el sistema deja de ser una fuente de verdad.

Skills predefinidos de Figma: un punto de partida

Antes de desarrollar Skills personalizados, es recomendable comenzar con los Skills que Figma ya publica para el servidor MCP de Figma. Estos están disponibles gratuitamente en GitHub y cubren los flujos de trabajo más comunes en el lienzo:

  • figma-use: El Skill fundamental para escribir en el lienzo. Enseña al agente a usar correctamente la herramienta subyacente de escritura en el lienzo de Figma, proporcionándole una comprensión compartida de cómo funciona Figma para que su resultado sea coherente.
  • figma-generate-library: Construye o actualiza una biblioteca de sistema de diseño de Figma directamente desde su base de código, incluyendo colecciones de tokens, temas y componentes.
  • figma-generate-design: Construye pantallas completas utilizando componentes, variables y estilos reales extraídos de su sistema de diseño, en lugar de generar algo genérico.
  • figma-code-connect: Conecta componentes de diseño con código de producción, esencial para equipos que colaboran estrechamente con desarrolladores.

Estos Claude Skills para sistemas de diseño también sirven como referencias valiosas. Si se busca construir algo específico para un equipo, ofrecen un patrón sólido para aprender y adaptar. Se pueden invocar directamente desde el cliente MCP, como al escribir un comando tipo /figma-generate-library en Claude Code.

Cómo redactar un Skill de sistema de diseño

Una vez familiarizado con los Skills predefinidos de Figma, el siguiente paso es crear uno personalizado. Esto implica enseñar al agente los nombres de los tokens, las directrices del equipo y las convenciones de nomenclatura de componentes. Un archivo SKILL.md sigue una estructura consistente:

  1. Título y descripción claros: Indique al agente qué hace el Skill y cuándo usarlo. Por ejemplo, "Construir una pantalla usando componentes y tokens del sistema de diseño Acme" es lo suficientemente específico.
  2. Sección "Cuándo usar": Liste dos o tres escenarios concretos donde el Skill de sistema de diseño de Claude es aplicable, como la creación de una nueva pantalla que debe usar componentes de la biblioteca o la conversión de valores brutos en variables vinculadas.
  3. Instrucciones como procedimiento ordenado: Utilice lenguaje imperativo y numere cada paso. La regla más importante debe ser la primera: siempre buscar en la biblioteca antes de crear algo nuevo.
  4. Codificación de taxonomía de tokens y reglas de componentes: Incluya las convenciones de nomenclatura, la guía de tokens semánticos versus primitivos, la estructura de variantes y cualquier directriz extraída de la documentación existente.
  5. Al menos un ejemplo concreto: Muestre una muestra de entrada junto con la salida esperada: qué se crea, qué componentes se utilizan y cómo se vinculan los tokens.

Algunos equipos dividen los Skills en "Skills de proyecto", que residen en el repositorio compartido, y "Skills personales", para flujos de trabajo individuales. Ambos pueden incluir una carpeta de activos para plantillas reutilizables, mapas de nombres o estructuras de salida de ejemplo. La biblioteca de componentes y las colecciones de variables en Figma Design son la fuente de verdad a la que apuntará su Skill. Cuanto más limpia esté esa biblioteca, mejor será el rendimiento del Skill.

Flujo de trabajo de ejemplo y consejos

Considere el caso de un diseñador de producto que necesita construir una página de configuración dentro de un equipo con un sistema de diseño establecido. Sin un Skill, el agente producirá una pantalla que, aunque plausible, utilizará valores codificados que no se ajustan al sistema del equipo.

Con un Skill bien redactado, el agente primero consulta la biblioteca publicada, identifica los componentes de Tarjeta y Formulario ya en uso, vincula cada color a un token semántico y ensambla la pantalla sección por sección, manteniendo las convenciones de nomenclatura. Una vez que la pantalla llega a Figma Design, el equipo de desarrollo puede integrarla con facilidad.