figma-create-design-system-rulesFinalidad, uso y origen

Lo que hace esta habilidad

Genera reglas de diseño personalizadas para el código del usuario. Úselo cuando el usuario diga "crear reglas de diseño", "generar reglas para mi proyecto", "configurar reglas de diseño", "personalizar las directrices del sistema de diseño" o quiera establecer convenciones específicas del proyecto para los flujos de trabajo de Figma a código. Requiere conexión al servidor Figma MCP.

Cómo funciona el flujo de trabajo ascendente

- IMPORTANT: Always use components from `[YOUR_PATH]` when possible
- Place new UI components in `[COMPONENT_DIRECTORY]`
- Follow `[NAMING_CONVENTION]` for component names
- Components must export as `[EXPORT_PATTERN]`

Requisitos y configuración

Límites y controles de calidad

Comience con una prueba segura.

1. Verifique el host compatible y las instrucciones de instalación del repositorio. Mantenga juntos el directorio Skill y sus scripts, recursos y documentación a los que hace referencia;SKILL.mdsolo puede omitir dependencias.
2. Proporcione al agente sus datos reales, el resultado deseado y los criterios de aceptación. La sintaxis de invocación y las herramientas disponibles dependen del sistema anfitrión; este sitio no presupone un comando de instalación universal.
3. Pruebe el flujo de trabajo original en un proyecto desechable o en una copia. Revise las operaciones que modifican archivos, servicios remotos o recursos facturables antes de autorizarlas.
4. Valide el resultado comparándolo con los controles de calidad de origen y sus propios requisitos. Un activador exitoso o un alto número de estrellas en el repositorio no garantizan un resultado correcto.

Especificación del formato y directorio de habilidades ↗

Lea más en la fuente

• Descripción general
• ¿Cuáles son las reglas del sistema de diseño?
• Requisitos previos
• Cuándo usar esta habilidad
• Flujo de trabajo requerido
• Paso1Ejecute la herramienta Crear reglas del sistema de diseño.
• Paso2Analizar el código fuente
• Paso3Generar reglas específicas del proyecto
• Paso4: Guardar las reglas en el archivo de reglas correspondiente.
• Paso5: Validar e iterar
• Reglas esenciales (que siempre deben incluirse)
• Reglas recomendadas (muy valiosas)
• Reglas opcionales (específicas del proyecto)
• Ejemplo1Proyecto React + Tailwind
• Ejemplo2Proyecto Vue + CSS personalizado
• Ejemplo3Equipo del sistema de diseño
• Empieza con algo sencillo, luego itera.
• Sea específico
• Hacer que las reglas sean prácticas
• Utilice IMPORTANTE para las reglas críticas.
• Documenta el porqué
• Problema: El agente no está siguiendo las reglas.
• Problema: Las reglas entran en conflicto entre sí.
• Problema: Demasiadas reglas aumentan la latencia.
• Problema: Las reglas quedan obsoletas a medida que el proyecto evoluciona.
• Comprensión de las reglas del sistema de diseño
• Recursos adicionales

Habilidades relacionadas

• chatgpt-appsopenai/skills
• figmaopenai/skills
• figma-code-connect-componentsopenai/skills
• figma-create-new-fileopenai/skills

Traducción y alcance

Esta guía de lectura selecciona pasajes de la sección fijada en la parte superior.SKILL.mdLa traducción es asistida. No se trata de un manual completo ni garantiza la compatibilidad. Lea el original y los archivos a los que hace referencia antes de usarlo.

Esta introducción hace referencia a la versión fijada a continuación; la actividad actual del repositorio y la hora de recopilación se muestran por separado.

Fuente fijada

Lee el original ↗

Fuente recuperada

2026-10-29T09:32:23Z

Confirmación de origen

49f948faa9258a0c61caceaf225e179651397431

Fuente SHA-256

1f4d7e16ba5325a80da32e2e6bde0ea850ba9287f35f4675d51d55d2f0dc6e2a