Figma Create Design System Rulespar OpenAI

Figma Create Design System Rules Skill.

Remplacez les consignes vagues du type « suivre le design system » par des chemins et des conventions concrets.

Figma
Design systems
Règles d'agent

Télécharger OpenDesign Voir le guide d'utilisation

Revue de la source · Figma Create Design System RulesSKILL.md

Tâche Figma Produit • Une section ou un fichier de règles d'implémentation Figma propre au projet • Des conseils concrets sur l'emplacement des composants, des tokens et des ressources • Un petit test d'implémentation servant à affiner les règles Avant de commencer Connexion Figma MCP et accès à la base de code cible ; le format de règles de destination dépend de l'hôte de codage.

Résumé éditorial · source examinée 2026-10-07 · exemple non généré

01 Fonctionnement

Transformer les conventions du dépôt en règles d'implémentation Figma

Un workflow d'analyse de dépôt qui rédige et teste des règles concrètes pour l'implémentation Figma par un agent.

Workflow basé sur la sourcePas un benchmark d'exécution

L'approche de travail

Figma Create Design System Rules produit des conseils spécifiques au projet pour les futurs travaux Figma-vers-code. Il analyse où se trouvent les composants, comment le style est géré, où les tokens sont définis et quelles conventions d'architecture les implémentations doivent respecter. Son livrable est un fichier de règles, pas une bibliothèque de composants Figma ni un écran redessiné.

La source prend en charge des formats de règles pour Claude Code, Codex et Cursor. Les règles utiles nomment de vrais chemins de composants et sources de tokens au lieu d'imposer un schéma React ou Tailwind générique à chaque dépôt. Le workflow s'achève en essayant les règles sur un petit composant et en affinant ce qui n'a pas fonctionné, car une instruction écrite ne prouve pas qu'un agent la suivra de façon constante.

Livrables attendus

Une section ou un fichier de règles d'implémentation Figma propre au projet
Des conseils concrets sur l'emplacement des composants, des tokens et des ressources
Un petit test d'implémentation servant à affiner les règles

Voir le brief d'exemple

Du brief à la revue

01
Inspecter les conventions existantes
Obtenez d'abord le modèle de base à partir de l'outil create_design_system_rules de Figma MCP. Lisez ensuite l'organisation des composants, le style, les imports, le routage et les règles d'agent existantes avant de rédiger les ajouts propres au projet.
02
Rédiger des correspondances exploitables
Nommez les vrais fichiers de composants et de tokens, décrivez le contexte Figma requis et le flux de captures d'écran, et préservez le framework du projet.
03
Enregistrer et tester les règles
Utilisez le format de règles adapté à l'hôte sans écraser des instructions sans rapport. Testez une petite implémentation Figma et supprimez les conseils contradictoires ou inutiles.

02 Cas d’usage

Quand l'utiliser

Connexion Figma MCP et accès à la base de code cible ; le format de règles de destination dépend de l'hôte de codage.

Bon cas d'usage

Intégration d'un agentUtile lorsque de nouvelles sessions d'implémentation dupliquent sans cesse des composants ou codent en dur des valeurs qui ont déjà des tokens.
Capitalisation des conventions d'équipeConvient à une équipe de design system qui veut transformer des connaissances implicites du dépôt en conseils révisables.

Limites à vérifier

Les règles ne sont pas une application stricteUn fichier de règles peut guider un agent, mais il ne remplace ni le linting, ni les tests, ni une comparaison visuelle.
Les instructions existantes doivent être conservéesAjouter des conseils Figma ne doit pas effacer les règles du dépôt sans rapport ni introduire des exigences d'architecture contradictoires.

Éléments à fournir

Accès au dépôtFournissez le projet réel, avec des composants et des fichiers de style représentatifs.
Hôte de l'agentIndiquez le format de règles utilisé par l'équipe, par exemple AGENTS.md, CLAUDE.md ou les règles Cursor.
Décisions d'équipe connuesFournissez les conventions impossibles à déduire de façon fiable, y compris les responsabilités et les exceptions approuvées.

03 Décisions importantes

Les décisions qui comptent

Des chemins précis plutôt que des slogans
Un composant Button et un fichier de tokens nommés sont plus exploitables qu'une demande générale de cohérence.
S'adapter au dépôt
La source considère la représentation générée par Figma comme un contexte de design à adapter au framework et aux styles propres du dépôt.

04 Exemple de brief

Essayer un brief ciblé

Le brief d'exemple ci-dessous n'a pas été testé. Vérifiez la configuration du skill avant de l'utiliser.

Vérifier la configuration

Utilisez le skill sélectionné avec le mécanisme d'instructions existant du projet. Ces documents Beta sont régis par les conditions développeur Figma. Examinez l'effet des modifications du fichier de règles sur le comportement futur de l'agent.

Fichier source amont

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

Connexion Figma MCP et accès à la base de code cible ; le format de règles de destination dépend de l'hôte de codage.

Commencer par un seul livrable

Adaptez le périmètre, les sources et les contraintes de ce brief avant d'exécuter le skill.

Brief d'exemple

Utilise figma-create-design-system-rules pour documenter nos conventions Figma-vers-code existantes. Inspecte d'abord le dépôt, conserve l'AGENTS.md actuel et ajoute une section ciblée nommant nos chemins de composants, de tokens et de ressources. N'introduis pas de nouveau framework de style. Valide les conseils sur un petit composant et signale toute convention qui nécessite une décision de l'équipe.

Inspecter le résultat

Comparez le résultat réel à ces critères observables.

Chaque chemin de composant et de token référencé existe.
Les nouvelles règles ne contredisent ni ne remplacent les instructions existantes du projet.
Une petite implémentation suit les conventions de réutilisation et de style prévues.

OpenDesign fournit un espace de travail de design local pour les agents de codage. Cette fiche ne signifie pas que le skill est fourni avec ses outils externes, ses identifiants et ses dépendances logicielles.

Télécharger OpenDesign Lire le guide de démarrage rapide

05 Source et licence

Source et licence

Cette page décrit la révision source figée liée ci-dessous. Le comportement et les exigences en amont peuvent changer.

Propriétaire de la source: OpenAI
Dépôt: openai/skills
Fichier du skill: skills/.curated/figma-create-design-system-rules/SKILL.md
Licence: Conditions Figma
Instantané examiné: 2026-10-07 · 49f948faa925

Résumé éditorial de la source

Un workflow d'analyse de dépôt qui rédige et teste des règles concrètes pour l'implémentation Figma par un agent.

Résumé original par OpenDesign, d'après la source liée. Les étoiles du dépôt sont un indicateur de popularité daté, non une mesure d'utilisation du skill ni une note de qualité.

06 Questions avant de commencer

Questions avant de commencer

Crée-t-il des tokens dans Figma ?

Non. Sa sortie principale est un ensemble de conseils de projet lisibles par un agent. Créer des variables et des bibliothèques de composants dans Figma relève d'un autre skill.

Mon projet doit-il utiliser React et Tailwind ?

Non. La source demande explicitement à l'agent de détecter le framework et l'approche de style du dépôt, puis d'adapter les règles en conséquence.

Chaque convention doit-elle devenir une règle ?

La source recommande de commencer par les problèmes récurrents les plus importants et de garder des conseils précis, plutôt que de remplir le contexte de règles rarement utiles.

OpenDesign

Faites de la place pour la prochaine itération de design.

Gardez votre brief, vos documents sources et votre travail de design ensemble dans un espace de travail local. Vérifiez la configuration propre au skill avant de l'ajouter à votre workflow.

Télécharger OpenDesign Parcourir les skills de design