design-systempar Alireza Rezvani

Design System Skill.

Un skill Claude Code et Codex pour le travail de marque et de design system : capture l'identité de marque en une fois via un assistant en 10 questions pour les documents et présentations ultérieurs.

Marque et design systems
Design system

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

alirezarezvani/claude-skills · markdown-html/skills/design-system/SKILL.mdSKILL.md

--- name: design-system description: Captures the user's brand identity once via a 10-question onboarding wizard (primary/accent HEX + heading + body Google Fonts + design style editorial/technical/minimal/playful + default output directory + syntax theme + TOC behavior + optional logo/company), validates body-text and link contrast against WCAG 2.2 AA, derives 12 CSS custom properties in HSL space, and stores the result for every markdown-html … --- ## When to invoke ## Onboarding question set (10 questions) ## Hard rules ## Derived 12-token palette ## Forcing-question library (Matt Pocock grill-with-docs pattern) ## Customization in use (worked example)

En-tête et titres de section lus depuis le fichier source le 14 septembre 2026 · 11 234 caractères au total

01 Ce qu'il fait

Ce que fait le skill design-system dans Claude Code et Codex

Résumé, workflow et sorties, tous lus dans le SKILL.md du skill.

D'après le SKILL.mdLu le 14-09-2026 · pas une exécution enregistrée

Dans les termes du Skill

Le skill design-system est le propriétaire de marque partagé du plugin markdown-html. Il capture l'identité de marque une seule fois via un assistant d'intégration en 10 questions — valeurs HEX primaire et d'accent, Google Fonts pour les titres et le texte courant, un style de design (éditorial, technique, minimal ou ludique), répertoire de sortie par défaut, thème de code, comportement de la table des matières et, en option, nom et logo d'entreprise — puis valide le contraste du texte courant et des liens selon WCAG 2.2 AA et dérive 12 propriétés personnalisées CSS dans l'espace HSL.

Trois outils Python reposant uniquement sur la bibliothèque standard gèrent l'onboarding, le chargement de la configuration et la validation de la palette ; la précédence va du projet au global, puis aux valeurs par défaut intégrées. Chaque convertisseur (md-document, md-review, md-slides) lit la configuration enregistrée : modifier un token modifie donc chaque document rendu.

Ce qu'il produit

Un fichier de configuration contenant la marque et la palette dérivée, écrit soit globalement, soit dans le projet.
Douze propriétés personnalisées CSS intégrées dans le bloc de style de chaque convertisseur, telles que --md-surface, --md-border, --md-link et --md-warn.
Un schéma JSON pour la configuration, fourni comme ressource pour la validation.

Voir l'exemple de prompt ↗

Fonctionnement

01
Lancer l'onboarding une seule fois
Le skill est le propriétaire partagé de la marque pour le plugin markdown-html : md-document, md-review et md-slides consomment tous la configuration qu'il écrit, si bien qu'une seule exécution applique la marque à toutes les conversions.
02
Répondre aux dix questions
L'assistant enregistre default_output_dir, les HEX primary et accent, les polices de titre et de corps, design_style, code_theme, toc.behavior, ainsi que company_name et logo_url en option.
03
Laisser la validation conditionner l'enregistrement
brand_palette_validator.validate() s'exécute après chaque modification : la paire est donc revérifiée à chaque édition de champ, et non seulement à la fin de l'assistant.
04
Dériver les douze tokens
derive_palette() calcule des tokens tels que --md-surface à partir de bg plus ou moins 4 à 6 % de luminance et --md-text-muted sous la forme rgba(text, 0.68), puis les stocke sous derived_palette dans le même fichier de configuration.
05
Résoudre la configuration par précédence
config_loader.py est le chargeur importable que chaque convertisseur appelle avant le rendu ; il fusionne d'abord le projet, puis le global, puis les valeurs par défaut intégrées, et respecte la variable d'environnement de contournement.
06
Remplacer ou réinitialiser sans interaction
Au-delà de l'assistant, onboard.py accepte --defaults, --set key=value, --scope project, --show et --reset : les champs de marque peuvent donc être modifiés ou effacés sans repasser par les questions.

02 Trouvez celui qui vous convient

Quand utiliser le Skill design-system

Utilisez le skill design-system dans Claude Code ou Codex lorsque le travail concerne la marque et le design system de ce type. L'adéquation et les limites ci-dessous sont tirées du fichier du skill.

Bon choix

Un espace de travail où quelqu'un demande pour la première fois de convertir du markdown en HTML, donc l'onboarding n'a jamais tourné.
Un dépôt qui a besoin d'une marque différente du reste de votre travail et ne doit pas hériter de la configuration globale.
Une CI ou une session éphémère qui a besoin de valeurs par défaut sans aucune intervention plutôt que de dix questions interactives.
Vous disposez déjà d'au moins un HEX de marque que vous voulez appliquer de façon cohérente à toutes les conversions HTML.
Vous voulez tester une couleur primary et une couleur accent candidates au regard des WCAG avant de les valider dans la configuration.

Connaître les limites

Ce n'est pas un système complet de tokens de design comme Style Dictionary ou Theo : il en fournit douze, pas cent.
Il n'héberge pas de polices personnalisées : Google Fonts via CDN est la seule source typographique.
Ce n'est pas une suite d'audit d'accessibilité ; axe-core ou pa11y s'en chargent, et le skill ne fait respecter que le contraste.
Il ne transforme pas le CSS existant — la palette dérivée est injectée uniquement dans le HTML nouvellement généré.

Quoi fournir

Répertoire de sortie par défautUn chemin qui doit être accessible en écriture ; la valeur par défaut est ./markdown-html-out/ et une valeur vide ou non accessible en écriture bloque l'enregistrement.
HEX principal de la marqueValidé selon ^#?[0-9a-fA-F]{6}$ ; valeur par défaut #0A1628. La bibliothèque de questions de cadrage recommande un HEX que vous utilisez déjà, pas un bleu générique.
HEX de l'accent, ou videLaissez ce champ vide lors d'une première exécution pour laisser la dérivation produire une couleur complémentaire ; ne le définissez explicitement que si un kit de marque en spécifie une.
Noms des polices de titre et de corps de texteNoms de Google Font choisis parmi 12 valeurs par défaut sûres, Inter étant la police par défaut pour les deux rôles.
Nom d'entreprise et URL du logo facultatifsLes deux prennent par défaut une chaîne vide ; l'URL du logo peut rester vide et est intégrée en base64 au moment du rendu.

03 Dans le skill

Règles que le skill design-system donne à Claude Code et Codex

7 instructions concrètes, valeurs par défaut et limites que le SKILL.md fixe pour l'agent — la partie du fichier qui change le résultat.

Le contraste doit passer, sinon rien n'est enregistré
Le texte du corps sur le fond et les liens sur le fond doivent tous deux atteindre 4,5:1 selon WCAG 2.2 §1.4.3.
Le répertoire de sortie doit être accessible en écriture
L'assistant remonte jusqu'à un ancêtre existant et vérifie os.access(parent, os.W_OK) ; un chemin vide ou non accessible en écriture entraîne une sortie avec le code 3, et output_path_resolver.py applique la même règle à chaque conversion.
La personnalisation doit modifier le résultat
Les champs purement décoratifs échouent au regard de la discipline de conception : chaque consommateur doit lire la configuration et effectuer un rendu différent lorsque design_style, brand.primary, code_theme ou toc.behavior changent.
La priorité est fixe
La configuration du projet l'emporte sur la configuration globale, qui l'emporte sur les valeurs par défaut intégrées, et la fusion en profondeur préserve les clés imbriquées : ainsi, la surcharge de brand.primary dans un projet ne fait pas disparaître typography.heading_font de la configuration globale.
Le mode sans confirmation est réservé aux exécutions headless
MARKDOWN_HTML_NO_CONFIG=1 sert le CI, les conteneurs de test éphémères et les boucles d'évaluation ; ne l'activez jamais silencieusement pour un utilisateur interactif, qui se demanderait où sont passés ses tokens.
N'utilisez jamais une couleur primaire vive comme arrière-plan
Un primaire de marque saturé utilisé directement comme brand.bg produit un faible contraste de texte ; il devrait plutôt occuper l'emplacement accent.
Restez dans la taxonomie des 12 tokens
La sémantique de marque n'est pas encodée dans derived_palette au-delà de ces douze tokens ; en ajouter un exige un nom, un objectif et une règle de dérivation délibérés.

04 Mettez-le en pratique

Installer design-system dans Claude Code ou Codex

Une commande npx skills add, puis une première tâche dans votre agent et une checklist pour le résultat.

Ajouter design-system à Claude Code, Codex ou votre agent

Exécutez-la dans votre projet ; l'installateur demande à quel agent l'ajouter.

Terminal

npx skills add https://github.com/alirezarezvani/claude-skills --skill design-system

Formulaire générique en CLI skills pour markdown-html/skills/design-system/SKILL.md ; le dépôt peut documenter son propre chemin.

Donnez au Skill une première tâche de brand et de design-system

Rédigé dans les termes propres du skill ; remplacez les parties entre crochets par votre contenu.

Starter prompt

Set up the brand for this repo: primary #FF6B35, Inter for headings and body, editorial style, sticky-sidebar TOC, and save it per-project. Point the default output at [output directory] and then convert [document.md] with md-document so it comes out branded.

Source : rédigé à partir du SKILL.md, dans les termes propres du skill.

Vérifiez le premier résultat

Ce que le SKILL.md lui-même présente comme un résultat correct :

Inspectez la configuration effective avec config_loader.py --show, qui résout projet, puis global, puis valeurs par défaut.
Vérifiez que le fichier de configuration existe et que setup_completed_at est défini ; s'il est manquant ou nul, le convertisseur refuse et affiche l'onboarding à la place.
Vérifiez rapidement le contraste d'une paire candidate avec brand_palette_validator.py --primary et --accent avant de valider une marque.
Vérifiez que le contournement se comporte comme documenté en l'exécutant avec MARKDOWN_HTML_NO_CONFIG=1, qui ne renvoie que les DEFAULTS.

Dans OpenDesign, importez design-system depuis son lien SKILL.md : Plugins → Add → Skill → Import from link, puis sélectionnez-le dans la barre supérieure.

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

05 Open source, traçable

Source, licence et vérification

D'où proviennent les faits de cette page et quand ils ont été vérifiés pour la dernière fois.

Author: Alireza Rezvani
Repository: github.com/alirezarezvani/claude-skills Branche main
Fichier du skill: markdown-html/skills/design-system/SKILL.md Somme de contrôle du contenu enregistrée lors de la vérification ; commit 19392f7
License: MIT Depuis LICENSE ; SKILL.md indique « MIT ».
Étoiles du dépôt: 25 934 Instantané GitHub pris le 14/09/2026 pour l'ensemble du dépôt alirezarezvani/claude-skills, qui contient 5 skills dans ce catalogue. Pas une note ou un compteur d'utilisation pour design-system.
Vérifié par OpenDesign: 2026-09-14 Le fichier source, le chemin, le texte de licence et le nombre d'étoiles ont été vérifiés. Non intégré dans OpenDesign main (vérifié le 2026-08-28) ; aucune exécution en conditions réelles n'a été enregistrée sur cette page.

Dans le SKILL.md

Quand l'invoquerTable symptôme → action : onboarding, refus de conversion, portée du projet, définition d'un champ unique, réinitialisation, valeurs par défaut, contournement.
Jeu de questions d'onboarding (10 questions)Tableau des dix clés, des validateurs et des valeurs par défaut, du répertoire de sortie à l'URL du logo.
Règles strictesCinq règles numérotées : seuil WCAG AA, répertoire accessible en écriture, personnalisation réelle, priorité fixe, contournement délibéré.
Palette dérivée de 12 tokensTableau associant chaque propriété personnalisée CSS à son usage et à sa règle de dérivation HSL.
Bibliothèque de questions contraignantes (schéma grill-with-docs de Matt Pocock)Cinq questions, une par tour, avec réponses recommandées et citations du canon.
Personnalisation en pratique (exemple concret)Bloc Bash montrant onboarding, defaults, set, portée du projet, reset, show et bypass.
HypothèsesQuatre prérequis : une couleur HEX de marque, une configuration d'une à deux minutes, Google Fonts, un seuil WCAG AA.
Non-objectifsCe que ce n'est pas : système de tokens, hébergement de polices, commutateur de mode sombre, suite d'audit, transformateur CSS.
Distinct deDistingue ce validateur et ce script d'onboarding des versions landing et recherche clinique.
Artefact de sortieIndique les chemins JSON global et de projet, ainsi que la ressource de schéma.
Anti-patterns (à éviter)Quatre erreurs à éviter : sauter l'onboarding, arrière-plan trop vif, contournement silencieux, tokens hors taxonomie.
RéférencesClauses WCAG, ouvrages de typographie et de couleur, recommandations TOC, scripts apparentés.

Description du skill lui-même

« Capture l'identité de marque de l'utilisateur une fois via un assistant d'intégration de 10 questions (HEX primaire/accent + polices Google pour titres + corps + style de design éditorial/technique/minimal/ludique + répertoire de sortie par défaut + thème de syntaxe + comportement de la table des matières + logo/entreprise facultatif), valide le contraste du corps de texte et des liens par rapport à WCAG 2.2 AA, dérive 12 propriétés personnalisées CSS dans l'espace HSL, et enregistre le résultat pour que chaque convertisseur markdown-html le consomme. À utiliser avant toute conversion markdown-html. Se déclenche lors de l'intégration initiale (« configurer la marque », « configurer markdown-html », « lancer l'intégration »), lors d'une réinitialisation explicite (« réinitialiser le système de design », « réintégrer »), et est vérifié par chaque convertisseur via config_loader.py avant le rendu. Refuse d'enregistrer si le contraste du corps de texte échoue au niveau AA 4,5:1 ou si le répertoire de sortie n'est pas inscriptible. La précédence est projet (./.markdown-html/) > global (~/.config/markdown-html/) > valeurs par défaut intégrées ; MARKDOWN_HTML_NO_CONFIG=1 contourne. »

Description du front-matter tirée de SKILL.md. Le fichier complet fait environ 11 234 caractères. Lire le fichier complet sur GitHub.

06 Avant d'installer

Questions sur le skill design-system

Les réponses proviennent du SKILL.md tel que lu le 2026-09-14, et non d'une exécution enregistrée.

Dois-je terminer l'onboarding avant de convertir quoi que ce soit ?

Les convertisseurs vérifient la configuration via config_loader.py ; si elle est absente ou si setup_completed_at est null, la conversion est refusée et l'onboarding est proposé. Tant que vous n'avez pas terminé la configuration, la sortie s'affiche avec des valeurs par défaut de remplacement : techniquement fonctionnelle, mais sans identité de marque.

Design System

Exécutez design-system sur une véritable tâche de travail de marque et de design system.

Téléchargez OpenDesign, importez design-system depuis son lien SKILL.md, collez l'invite ci-dessus et lisez le plan avant le résultat.

Télécharger OpenDesign Parcourir tous les skills