Un peu de calme dans ce monde de dev
Maîtriser le Design System : back to basics
4 ateliers pour implémenter les Design Tokens
Using ChatGPT to practice for frontend live coding interviews
Cet article est dédié à l’IA dans le produit, avec un Design System et des Skills. Il résume le meet-up du 2 juillet 2026 sur le sujet. Vous pouvez voir le replay ici.
Vous savez que vous devriez vous mettre à l’IA. Mais tout va trop vite, et vous ne savez pas par où commencer. Les Skills sont une porte d’entrée concrète : un simple dossier de fichiers markdown qui transmet votre savoir-faire à un agent IA. Au meet-up du 2 juillet, nous avons montré la différence, démos à l’appui : une maquetteReprésentation visuelle statique de l'interface d'un produit ou service, souvent utilisée pour visualiser et valider les concepts initiaux. More FigmaFigma est un outil de design d'interface en ligne qui facilite la collaboration en temps réel entre les designers. Il offre des fonctionnalités pour le design, le prototypage et la création de systèmes de design. More conforme au pixel, des specs d’accessibilité alignées sur le RGAA, du code qui respecte vos conventions. Voici l’intégralité de ce que nous avons partagé.
L’anxiété liée à l’IA est réelle dans les équipes produit. Tout évolue à une vitesse folle. Vous voulez apprendre, mais vous n’avez pas le temps, et ça ressemble à une montagne.
Sur LinkedIn, tout le monde semble expert et fait « des trucs de fou ». La réalité des équipes est plus nuancée. Et pour un profil non technique, la première ouverture d’un terminal reste un atterrissage sur une autre planète.
Ce meet-up visait une chose : mettre le pied à l’étrier à tout le monde. Si vous êtes designer et que vous regardez Claude Code en pensant « c’est puissant, mais je ne sais pas gérer tout ça », lisez la suite.
Un avertissement honnête d’abord. Cet article est un instantané de nos pratiques en juin 2026 : certaines informations deviendront obsolètes. La réflexion sous-jacente, elle, perdurera. Comment organiser les compétences, découper les contenus, structurer les connaissances pour qu’elles évoluent, avec les outils, de manière agnostique, en gardant l’humain au centre.
C’est d’ailleurs notre positionnement IA chez Frontguys : une IA cadrée (l’IA assiste, l’humain décide et contrôle les résultats), pertinente (des cas d’usage qui apportent une vraie valeur, en complément de l’expertise humaine) et raisonnée (des modèles adaptés aux besoins réels, économes, sans dépendance à un outil ou un fournisseur). Tout le sujet du meet-up tient dans cette dernière ligne : travailler avec l’IA quel que soit le modèle, quel que soit l’outil.
Les Skills sont un format ouvert et léger permettant d’étendre les capacités des agents IA avec des connaissances spécialisées et des workflows dédiés. agentskills.io
Pourquoi c’est utile ? Parce qu’un LLM fait des moyennes. Il a une bonne connaissance générale, mais reste un modèle probabiliste. Sans règles d’usage précises, le résultat est aléatoire.
Pour s’amuser sur un projet perso, c’est acceptable. Dans une organisation qui doit respecter des standards et industrialiser, il faut des workflows dédiés. C’est exactement ce que les skills apportent.
La spécification a été écrite par Anthropic, puis publiée en ouvert. Elle a été reprise très vite : FigmaFigma est un outil de design d'interface en ligne qui facilite la collaboration en temps réel entre les designers. Il offre des fonctionnalités pour le design, le prototypage et la création de systèmes de design. More, Copilot, OpenAI et bien d’autres. Il existe quelques différences mineures entre éditeurs, mais le format est portable à 80-90 %. C’est devenu un standard de fait.
Nous avons fait trois démos, pour couvrir le workflow complet : design, accessibilité, code. Le point de départ : la page contact de notre site dédié à l’accessibilité, telle qu’elle existe en production. Tout est public dans le repo de démo, prompts, skills et résultats générés, avec deux branches de test (Sonnet et Opus).
Sans skills. Nous avons donné à Claude l’URL de la page en inspiration, avec pour consigne de construire la page contact dans FigmaFigma est un outil de design d'interface en ligne qui facilite la collaboration en temps réel entre les designers. Il offre des fonctionnalités pour le design, le prototypage et la création de systèmes de design. More. Résultat : complètement raté. La maquetteReprésentation visuelle statique de l'interface d'un produit ou service, souvent utilisée pour visualiser et valider les concepts initiaux. More ne ressemble pas à l’original. Aucune variable, aucun composant lié, le check de design de FigmaFigma est un outil de design d'interface en ligne qui facilite la collaboration en temps réel entre les designers. Il offre des fonctionnalités pour le design, le prototypage et la création de systèmes de design. More le confirme : rien ne va.
Au passage, une leçon utile : même quand on lui interdit, Claude a tendance à fouiller sa mémoire et son cache pour « s’inspirer ». Sans cadre, le résultat est biaisé par des restes d’ailleurs.
Avec skills. Un seul prompt : « construis une page contact en te basant sur les skills présents dans mon dossier ». Aucun autre contexte, aucun détail, tout est dans les skills. Résultat : la page ressemble à l’original « comme une goutte d’eau ».
Surtout : rien à revoir. Les calques sont nommés proprement. Pas une seule couleur en dur. Les bons composants sont utilisés, aux bons endroits. Et l’agent peut décliner tous les états du formulaire dans la foulée.
« Il a fabriqué la page aussi bien que je l’aurais fait. Et mieux que beaucoup de designers qui n’ont pas le temps, en mission, de faire ça proprement. »

Dernier test, qui confirme l’approche agnostique : FigmaFigma est un outil de design d'interface en ligne qui facilite la collaboration en temps réel entre les designers. Il offre des fonctionnalités pour le design, le prototypage et la création de systèmes de design. More a récemment sorti son propre agent, avec la possibilité d’ajouter des skills à la configuration. Mêmes skills, autre outil : la page générée respecte la charte à 99,9 %, et le check de design ne remonte rien.
En tant que consultant accessibilité, Hamza intervient avant le développement : specs dans les tickets Jira, ou annotations de développement directement dans FigmaFigma est un outil de design d'interface en ligne qui facilite la collaboration en temps réel entre les designers. Il offre des fonctionnalités pour le design, le prototypage et la création de systèmes de design. More (attributs HTML, comportement clavier, restitution par les lecteurs d’écran).
Sans skills. L’agent part sur les WCAG, le référentiel international, alors que le contexte français impose le RGAA. Il suppose la conformité d’éléments qu’il n’a pas vérifiés, contrastes en tête. Le niveau de détail ne permet pas d’en faire des critères d’acceptance exploitables dans un ticket. Et impossible de savoir si les numéros de critères cités sont réels ou hallucinés.
Avec skills. Premier changement, avant même de produire : l’agent pose des questions fonctionnelles. La validation du formulaire se fait-elle en AJAX ou par rechargement ? Ce bouton est-il un lien vers une page ou une action sur place ? Chaque réponse a un impact direct sur les specs d’accessibilité. Pour chaque question, il formule des hypothèses et recommande la réponse la plus probable.
Ensuite, il produit des specs formatées, liées au bon référentiel et aux bons critères RGAA, avec l’interdiction explicite d’inventer un critère de mémoire, et l’obligation de vérifier. Il ajoute des recommandations de code et la méthode de test (exemple : valider les liens d’évitement à la tabulation). Le consultant peut cocher directement sa grille d’évaluation.
Enfin, l’agent utilise l’API de FigmaFigma est un outil de design d'interface en ligne qui facilite la collaboration en temps réel entre les designers. Il offre des fonctionnalités pour le design, le prototypage et la création de systèmes de design. More pour poser des annotations natives au bon endroit, reliées au bon composant. Et le niveau de détail s’adapte : une skill peut caler ses specs sur le niveau du développeur qui les recevra, novice ou aguerri en accessibilité.
Ce filet de sécurité contre l’hallucination, c’est exactement ce qui manque quand on fait de la conformité. Vous imaginez le temps gagné ?

Sur le code, la différence est moins spectaculaire, et c’est une info en soi. Dans les deux cas, l’agent partait d’une maquetteReprésentation visuelle statique de l'interface d'un produit ou service, souvent utilisée pour visualiser et valider les concepts initiaux. More extrêmement bien spécifiée, visuellement et en accessibilité, via le MCP de FigmaFigma est un outil de design d'interface en ligne qui facilite la collaboration en temps réel entre les designers. Il offre des fonctionnalités pour le design, le prototypage et la création de systèmes de design. More. Les résultats d’accessibilité sont très bons dans les deux cas, principalement parce que les specs étaient excellentes.
Sans skills : du CSS natif correct, mais en vrac. Gestion des états d’erreur inline, code dur à lire, allers-retours permanents entre le fichier CSS et le HTML, pas d’autocomplétion.
Avec skills : le code respecte les conventions choisies. CSS modules pour l’autocomplétion, sous-composants nommés précisément, et une librairie dédiée pour gérer les styles liés aux variants d’un composant. C’est tout l’enjeu en entreprise : une base de code a des conventions et des librairies existantes, et l’agent doit les suivre.
Sur le choix de modèle : les tests ont tourné avec Sonnet (modèle intermédiaire, autonomie maximale) et Opus. Pour générer du front, Sonnet suffit largement. Inutile de payer le dernier modèle pour du HTML.

Trois bénéfices structurent notre usage :
Et quatre terrains d’application :
nom-de-skill/ ├── SKILL.md # obligatoire : métadonnées + instructions ├── references/ # optionnel : doc, guides, specs ├── assets/ # optionnel : templates, images └── scripts/ # optionnel : code exécutable
SKILL.md est le seul fichier requis. Du markdown : un format texte léger, lisible par tous, non propriétaire. Le tout est versionnable, historisé et auditable via git, compatible avec tous les agents, et découvrable par eux à l’exécution.
Le fichier a deux parties. Les métadonnées : le nom (celui du dossier, minuscules et tirets) et surtout la description. Elle ne décrit pas la skill pour un humain : elle dit à l’agent quand se déclencher, avec quels mots-clés. C’est la métadonnée la plus importante du système. S’y ajoutent des options : allowed-tools (outils pré-approuvés) et des extensions par éditeur comme disable-model-invocation.
Le contenu ensuite : la posture à tenir (« agis en tant qu’expert de X »), les instructions étape par étape, les templates et formats de réponse, des exemples pour contextualiser, et la gestion des cas particuliers.
La règle essentielle : les modèles savent déjà beaucoup de choses. Concentrez-vous sur ce que l’agent ne peut pas savoir : vos conventions, vos procédures, vos outils. Et dire quoi ne pas faire est aussi important, sinon plus, que dire quoi faire.
Prenons la skill de la démo design : design-landing-page. Elle n’est pas monolithique — elle orchestre cinq skills. design-system (tokens, composants, protocole de liaison des variables), design-frontguys (ton, discours, personas de la marque), figma-use (l’API FigmaFigma est un outil de design d'interface en ligne qui facilite la collaboration en temps réel entre les designers. Il offre des fonctionnalités pour le design, le prototypage et la création de systèmes de design. More), design-web-section (les sections réutilisables du site), et elle-même comme chef d’orchestre.
Pourquoi ce découpage ? Le coût. Réduire la consommation de la fenêtre de contexte est un des vrais problèmes des années à venir. Le découpage permet de ne charger que le nécessaire : nos premières versions non optimisées consommaient 30 000 à 40 000 tokens pour produire une page. Aujourd’hui : environ 5 000.
Le workflow suit trois phases. Cadrage : l’agent pose des questions quand il lui manque des informations. Architecture : il propose la structure, et un humain valide avant production. Production FigmaFigma est un outil de design d'interface en ligne qui facilite la collaboration en temps réel entre les designers. Il offre des fonctionnalités pour le design, le prototypage et la création de systèmes de design. More : import du design system, assemblage section par section.

Six règles non négociables encadrent le tout, vérifiées par un « pre-flight check » automatique avant livraison :
SKILL.md, les longs dans assets/.Les agents ne chargent pas tout en amont. C’est le principe de divulgation progressive, en trois niveaux :
SKILL.md, chargé si la tâche le justifie.references/, scripts/, assets/), chargées à la demande. Le fichier principal contient un index : « si tu dois faire X, va chercher telle référence ».Nos repères pratiques :
/skills et /context dans Claude, System Instructions dans Copilot CLI.Parlons coût, honnêtement. Sur notre démo code, la génération sans skills a consommé environ 90 000 tokens et 60 appels d’outils. Avec skills : environ 140 000, soit 60 % de plus, à cause des boucles de vérification. C’est le prix de la qualité et du contrôle. Mais le calcul ne s’arrête pas au premier jet : un premier jet de bonne qualité évite les boucles de correction qui n’en finissent pas, et chaque échange renvoie toute la discussion au modèle. Mieux vaut dépenser un peu plus au départ que corriger longtemps.
Dernier point de vigilance : la fenêtre de contexte. Passé la moitié de sa capacité, un modèle commence à perdre en qualité, comme un livre dont on retient bien le début et la fin, mal le milieu. Et la compression automatique des longues sessions est une compression avec perte. D’où une recommandation : une dizaine de skills actives par projet, pas plus. Trop de skills chargées, c’est plus de conflits et d’hallucinations.
Le point le plus important à comprendre pour passer le cap : l’IA est très forte pour vous accompagner dans la fabrication de vos skills. Personne n’écrit tout seul des heures durant. Pas de syndrome de l’imposteur : l’agent analyse ce que vous avez fait, vous testez, vous optimisez, vous itérez. Nos skills représentent plusieurs mois d’itérations.
L’astuce des modèles. Faites la première passe avec le modèle le plus avancé sous la main : il propose un plan, utilise les outils correctement, s’auto-analyse et vous aide à déboguer. Puis simplifiez et testez avec le modèle léger que vous utiliserez au quotidien. Beaucoup de nos skills ont été écrites avec Opus, puis simplifiées et validées avec Sonnet. En cas de doute, demandez au modèle lui-même quel modèle convient à la tâche.
Deux skills pour écrire des skills. Celle de Matt Pocock : minimaliste, parfaite pour créer un petit outil rapidement. Et le skill-creator d’Anthropic : complet, avec outillage. Il vous pose des questions sur l’objectif et le déclenchement, puis génère la skill.
Le benchmark, pour savoir si ça marche. Le skill-creator embarque deux outils qui génèrent un rapport HTML – ça tourne sur n’importe quelle machine :

Le déclenchement, justement. Certaines skills ne se déclencheront jamais toutes seules : le modèle considère qu’il sait déjà faire — c’est presque systématique pour le code. Dans ce cas, invoquez explicitement avec /nom-de-la-skill. À l’inverse, pour réserver une skill à l’invocation manuelle, la métadonnée disable-model-invocation la retire de l’index du modèle (support variable selon les agents ; une description vide produit le même effet).
Et pour entretenir : le prompt de simplification. Les modèles savent déjà énormément de choses, et les skills générées sont souvent trop bavardes. Demandez régulièrement : classe chaque ligne en « garder / réécrire / supprimer », enlève ce que tu sais déjà faire, ne garde que les règles métier et les contraintes spécifiques, et liste ce que tu as changé et pourquoi. Ce prompt, merci Julien Riveron, réduit la taille des fichiers en conservant la performance. Une relecture humaine derrière, et c’est réglé.
Inutile de tout écrire vous-même.
Les sources officielles. Anthropic (dont skill-creator et les skills de production PDF/PowerPoint packagées avec Claude), Figma, Copilot / awesome-copilot (compilation communautaire validée) et OpenAI. Un conseil appuyé pour les skills FigmaFigma est un outil de design d'interface en ligne qui facilite la collaboration en temps réel entre les designers. Il offre des fonctionnalités pour le design, le prototypage et la création de systèmes de design. More : n’utilisez jamais le MCP FigmaFigma est un outil de design d'interface en ligne qui facilite la collaboration en temps réel entre les designers. Il offre des fonctionnalités pour le design, le prototypage et la création de systèmes de design. More sans elles. Ça fonctionne sans, mais les résultats sont incomparablement meilleurs avec.
Les communautés.
Spécialiser une tâche — encoder un savoir-faire répétable : la méthodologie d’ingénierie superpowers, le contrôle d’accessibilité WCAG 2.2 d’Addy Osmani, des règles de rédaction, des plans de test complets.
Maîtriser un outil — cadrer les bonnes pratiques et les API : les skills FigmaFigma est un outil de design d'interface en ligne qui facilite la collaboration en temps réel entre les designers. Il offre des fonctionnalités pour le design, le prototypage et la création de systèmes de design. More (FigJam, Slides, Code Connect, diagrammes), Playwright pour piloter un navigateur et vérifier qu’une page correspond à la maquetteReprésentation visuelle statique de l'interface d'un produit ou service, souvent utilisée pour visualiser et valider les concepts initiaux. More, Storybook, Jira pour analyser et construire un backlog.
Corriger un comportement — compenser une faiblesse récurrente du modèle. Les LLM sont bavards et toujours d’accord avec vous. Les skills de Matt Pocock répondent à ça : caveman (réponses courtes), grill-me (l’agent vous challenge au lieu d’acquiescer), grill-with-docs (il vous challenge après avoir lu une référence). Côté BMAD : des reviews en posture critique, cynique, ou pour chasser les cas limites.
Le chemin de stockage détermine la visibilité, à trois niveaux :
Pour l’entreprise : les plugins. Un plugin regroupe skills, agents, hooks — et souvent des serveurs MCP, car les deux vont ensemble. En doublant les déclarations (un manifeste Claude, un manifeste Copilot), le même plugin fonctionne sur les deux écosystèmes. Un seul repo GitHub peut porter toutes les skills de l’entreprise : la commande /plugin marketplace pointe vers le repo, puis chacun installe son plugin — un pour les designers, un pour les développeurs, un pour les product owners. Découper par métier évite de charger des skills inutiles.
Pour le monde entier : un simple repo GitHub. Pas besoin de marketplace ni de manifeste : des skills correctement formatées dans un dépôt public suffisent. Un npx skills add [owner/repo] les installe dans vos skills personnelles — et les référence au passage sur skills.sh pour tous les autres.
La question est venue de la salle : comment lier plusieurs skills pour reproduire un vrai workflow d’équipe ?
Notre réponse, à date : le moins d’automatisation possible. Sur une mission récente, nous avons commencé par un système ambitieux, plein d’agents et de sous-agents pour accompagner la création d’un design system. Constat : une complexité qui ne servait pas à grand-chose. Nous avons transformé les agents en skills, simplifié au maximum, et basculé sur une invocation explicite, étape par étape : je lance telle tâche, je relis, je valide, la synthèse part dans un fichier, je repars sur une session propre.
Des milliers de lignes divisées par deux ou trois. Des résultats aussi bons, et plus satisfaisants, parce qu’ils correspondent à notre façon de travailler, avec une validation humaine entre chaque étape. Les agents pleinement autonomes ? Nous ne leur faisons pas encore confiance.
Si nous avions un slogan à retenir pour l’IA, c’est vraiment : l’humain dans la boucle.
Les outils changeront, les specs évolueront. Mais structurer votre savoir pour le transmettre, à vos équipes comme à vos agents, est un investissement durable. Notre conviction reste la même : l’IA est un moyen, un accélérateur. Pour être pertinente et efficace, elle doit être cadrée et gouvernée stratégiquement.
Une skill n’est rien d’autre que cela : votre cadre, écrit noir sur blanc, dans un format que tous les agents comprennent.
Pas de la magie. Du savoir structuré.
Et pour sortir de la bulle, on a ouvert un questionnaire maturité et usages de l’IA, 10 questions, 3 minutes :
👉 Vos usages IA – Remplir le formulaire
Toutes les ressources citées sont dans le repo de démo et les slides du meet-up.
Rendez-vous en septembre pour le prochain : gouvernance IA et contrôle des coûts, REX d’un refactoring de dette technique avec Codex, et un serveur IA autonome sur modèles alternatifs.