Figma Create Design System Rulespor OpenAI

Figma Create Design System Rules Skill.

Sustituye las instrucciones vagas de seguir el sistema de diseño por rutas y convenciones concretas.

Figma
Sistemas de diseño
Reglas para agentes

Revisión de la fuente · Figma Create Design System RulesSKILL.md

Tarea Figma Produce • Una sección o un archivo de reglas de implementación de Figma específico para el proyecto • Guía concreta sobre componentes, tokens y ubicación de recursos • Una pequeña comprobación de implementación para refinar las reglas Antes de empezar Conexión con Figma MCP y acceso al código base de destino; el formato de reglas de destino depende del host de programación.

Resumen editorial · fuente revisada 2026-10-07 · no es un ejemplo generado

01 Qué hace

Convierte las convenciones del repositorio en reglas de implementación de Figma

Un flujo de análisis de repositorios que escribe y prueba reglas concretas para agentes en la implementación de Figma.

Flujo basado en la fuenteNo es una prueba de ejecución

El enfoque de trabajo

Figma Create Design System Rules produce una guía específica del proyecto para futuros trabajos de Figma a código. Analiza dónde residen los componentes, cómo se gestionan los estilos, dónde se definen los tokens y qué convenciones de arquitectura deben conservar las implementaciones. Su entregable es un archivo de reglas, no una biblioteca de componentes de Figma ni una pantalla rediseñada.

La fuente admite formatos de reglas para Claude Code, Codex y Cursor. Las reglas útiles nombran rutas reales de componentes y fuentes de tokens en lugar de imponer un patrón genérico de React o Tailwind a todos los repositorios. El flujo termina probando las reglas en un componente pequeño y refinando lo que no funcionó, porque una instrucción escrita no prueba que un agente la vaya a seguir de forma constante.

Entregables esperados

Una sección o un archivo de reglas de implementación de Figma específico para el proyecto
Guía concreta sobre componentes, tokens y ubicación de recursos
Una pequeña comprobación de implementación para refinar las reglas

Ver el brief de ejemplo

Del brief a la revisión

01
Inspeccionar las convenciones existentes
Primero obtén la plantilla base de la herramienta create_design_system_rules de Figma MCP. Después lee la organización de componentes, los estilos, las importaciones, el enrutamiento y las reglas de agente existentes antes de redactar adiciones específicas del proyecto.
02
Escribir asignaciones accionables
Nombra los archivos reales de componentes y tokens, describe el contexto de Figma requerido y el flujo de capturas de pantalla, y conserva el framework del proyecto.
03
Guardar y probar las reglas
Usa el formato de reglas adecuado del host sin sobrescribir instrucciones no relacionadas. Prueba una implementación pequeña de Figma y elimina la guía contradictoria o inútil.

02 Cuándo usarlo

Cuándo usarlo

Conexión con Figma MCP y acceso al código base de destino; el formato de reglas de destino depende del host de programación.

Encaja bien

Incorporación de agentesÚtil cuando las nuevas sesiones de implementación duplican componentes una y otra vez o codifican a mano valores que ya tienen tokens.
Registro de convenciones del equipoSirve para que un equipo de sistema de diseño convierta el conocimiento no escrito del repositorio en una guía revisable.

Límites que conviene revisar

Las reglas no son un mecanismo de cumplimientoUn archivo de reglas puede guiar a un agente, pero no sustituye al linting, las pruebas ni una comparación visual.
Las instrucciones existentes deben conservarseAñadir la guía de Figma no debe borrar reglas del repositorio no relacionadas ni introducir requisitos de arquitectura contradictorios.

Aporta estos datos

Acceso al repositorioProporciona el proyecto real, incluidos componentes representativos y archivos de estilos.
Host del agenteIndica el formato de reglas que usa el equipo, como AGENTS.md, CLAUDE.md o reglas de Cursor.
Decisiones conocidas del equipoAporta las convenciones que no pueden deducirse con fiabilidad, incluidas las responsabilidades y las excepciones aprobadas.

03 Decisiones importantes

Decisiones que importan

Rutas concretas mejor que eslóganes
Un componente Button y un archivo de tokens con nombre son más accionables que una petición general de coherencia.
Adaptarse al repositorio
La fuente trata la representación generada por Figma como contexto de diseño que debe adaptarse al framework y a los estilos propios del repositorio.

04 Ejemplo de brief

Prueba un brief concreto

El brief de ejemplo siguiente no se ha probado. Revisa la configuración del skill antes de usarlo.

Revisar la configuración

Usa el skill seleccionado con el mecanismo de instrucciones que ya tenga el proyecto. Estos materiales Beta se rigen por los Términos para desarrolladores de Figma. Revisa cómo afectan los cambios en el archivo de reglas al comportamiento futuro del agente.

Archivo de la fuente original

https://github.com/openai/skills/blob/49f948faa9258a0c61caceaf225e179651397431/skills/.curated/figma-create-design-system-rules/SKILL.md

Conexión con Figma MCP y acceso al código base de destino; el formato de reglas de destino depende del host de programación.

Empieza con un solo entregable

Adapta el alcance, el material de origen y las restricciones de este brief antes de ejecutar el skill.

Brief de ejemplo

Usa figma-create-design-system-rules para documentar nuestras convenciones actuales de Figma a código. Inspecciona primero el repositorio, conserva el AGENTS.md actual y añade una sección concreta que nombre nuestras rutas de componentes, tokens y recursos. No introduzcas un nuevo framework de estilos. Valida la guía con un componente pequeño y señala cualquier convención que requiera una decisión del equipo.

Inspeccionar el resultado

Comprueba el resultado real con estos criterios observables.

Todas las rutas de componentes y tokens mencionadas existen.
Las nuevas reglas no contradicen ni sustituyen las instrucciones existentes del proyecto.
Una implementación pequeña sigue las convenciones previstas de reutilización y estilos.

OpenDesign ofrece un espacio de trabajo de diseño local para agentes de programación. Esta ficha no significa que el skill incluya herramientas externas, credenciales ni dependencias de software.

Descargar OpenDesign Leer la guía de inicio rápido

05 Fuente y licencia

Fuente y licencia

Esta página describe la revisión fija de la fuente enlazada abajo. El comportamiento y los requisitos de la fuente original pueden cambiar.

Propietario de la fuente: OpenAI
Repositorio: openai/skills
Archivo del skill: skills/.curated/figma-create-design-system-rules/SKILL.md
Licencia: Términos de Figma
Instantánea revisada: 2026-10-07 · 49f948faa925

Resumen editorial de la fuente

Un flujo de análisis de repositorios que escribe y prueba reglas concretas para agentes en la implementación de Figma.

Resumen original de OpenDesign, basado en la fuente enlazada. Las estrellas del repositorio son una señal de popularidad con fecha, no indican el uso del skill ni una puntuación de calidad.

06 Preguntas antes de empezar

Preguntas antes de empezar

¿Crea tokens dentro de Figma?

No. Su resultado principal es una guía de proyecto legible por agentes. Crear variables y bibliotecas de componentes en Figma es otro Skill distinto.

¿Mi proyecto debe usar React y Tailwind?

No. La fuente pide expresamente al agente que detecte el framework y el enfoque de estilos del repositorio y que adapte las reglas en consecuencia.

¿Debe convertirse en regla cada convención?

La fuente recomienda empezar por los problemas recurrentes más importantes y mantener la guía concreta, en lugar de llenar el contexto con reglas rara vez útiles.

OpenDesign

Deja espacio para la próxima iteración de diseño.

Mantén juntos tu brief, el material de origen y el trabajo de diseño en un espacio de trabajo local. Revisa la configuración propia del skill antes de añadirlo a tu flujo de trabajo.

Descargar OpenDesign Explorar skills de diseño