Figma Design System Builder
warpdotdev/warp
Builds or updates a design system in Figma from a codebase in ordered phases: discovery, variables and tokens, components, theming and documentation, with checkpoints.
Convention DESIGN.md pour design systems AI-friendly. An agent skill from TheBeardedBearSAS/claude-craft.
Install Design Md Convention
$ npx skills add TheBeardedBearSAS/claude-craft --skill design-md-convention -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install TheBeardedBearSAS/claude-craft design-md-convention --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/TheBeardedBearSAS/claude-craft.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/design-md-convention .claude/skills/design-md-convention && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "design-md-convention" agent skill from https://github.com/TheBeardedBearSAS/claude-craft/tree/main/.claude/skills/design-md-convention into .claude/skills/design-md-convention/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-md-convention", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/TheBeardedBearSAS/claude-craft/tree/main/.claude/skills/design-md-conventionType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add TheBeardedBearSAS/claude-craft --skill design-md-convention -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install TheBeardedBearSAS/claude-craft design-md-convention --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/TheBeardedBearSAS/claude-craft.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.claude/skills/design-md-convention .agents/skills/design-md-convention && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "design-md-convention" agent skill from https://github.com/TheBeardedBearSAS/claude-craft/tree/main/.claude/skills/design-md-convention into .agents/skills/design-md-convention/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-md-convention", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add TheBeardedBearSAS/claude-craft --skill design-md-convention -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install TheBeardedBearSAS/claude-craft design-md-convention --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/TheBeardedBearSAS/claude-craft.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.claude/skills/design-md-convention .cursor/skills/design-md-convention && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "design-md-convention" agent skill from https://github.com/TheBeardedBearSAS/claude-craft/tree/main/.claude/skills/design-md-convention into .cursor/skills/design-md-convention/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-md-convention", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/TheBeardedBearSAS/claude-craft.git --path .claude/skills/design-md-convention--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add TheBeardedBearSAS/claude-craft --skill design-md-convention -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install TheBeardedBearSAS/claude-craft design-md-convention --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/TheBeardedBearSAS/claude-craft.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.claude/skills/design-md-convention .gemini/skills/design-md-convention && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "design-md-convention" agent skill from https://github.com/TheBeardedBearSAS/claude-craft/tree/main/.claude/skills/design-md-convention into .gemini/skills/design-md-convention/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-md-convention", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install TheBeardedBearSAS/claude-craft design-md-conventionInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add TheBeardedBearSAS/claude-craft --skill design-md-convention -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/TheBeardedBearSAS/claude-craft.git skills-src && mkdir -p .github/skills && cp -r skills-src/.claude/skills/design-md-convention .github/skills/design-md-convention && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "design-md-convention" agent skill from https://github.com/TheBeardedBearSAS/claude-craft/tree/main/.claude/skills/design-md-convention into .github/skills/design-md-convention/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-md-convention", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add TheBeardedBearSAS/claude-craft --skill design-md-convention -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install TheBeardedBearSAS/claude-craft design-md-convention --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/TheBeardedBearSAS/claude-craft.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.claude/skills/design-md-convention .opencode/skills/design-md-convention && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "design-md-convention" agent skill from https://github.com/TheBeardedBearSAS/claude-craft/tree/main/.claude/skills/design-md-convention into .opencode/skills/design-md-convention/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-md-convention", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
design-md-convention- GitHub stars
- 107
- Token cost
- ~1.1k tokens
- SKILL.md length
- 338 words
- Files
- 1
- Skills in repo
- 12
- Repo updated
- First seen
- Licence
- MIT
At a glance
Convention DESIGN.md pour design systems AI-friendly. An agent skill from TheBeardedBearSAS/claude-craft.
- Works in 4 steps: Concis et structuré → Tokens nommés, pas valeurs brutes → Do / Don't explicites → …
- Setting up a new project UI
- SKILL.md covers Pourquoi DESIGN.md ?, Structure recommandée, Règles de rédaction and Intégration avec agents Claude…, plus 4 more sections
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
What it does
Design Md Convention is an agent skill from TheBeardedBearSAS/claude-craft. Convention DESIGN.md pour design systems AI-friendly. Use when setting up a new project UI, documenting design tokens, or generating UI consistent with a design system.
Its SKILL.md is about 1.1k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.
It sits in Frontend & Design, covering Design tokens and Design systems. It works with Figma. The repository describes itself as: Supercharge Claude Code with Expert Knowledge A comprehensive framework for AI-assisted development. Install standardized rules, agents, and commands for your projects across… The licence is MIT.
When your agent uses it
- Setting up a new project UI
- Documenting design tokens
- Generating UI consistent with a design system
Example prompts
- “/design-md-convention”
Workflow steps
4 steps, taken from the step headings in SKILL.md.
What it can do on your machine
Read from SKILL.md and the folder at commit 99c1ee3. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md.
From the folder's file list and the shell code blocks in SKILL.md.
Network
Links to these hosts (documentation or services it may open):
github.com
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Design Md Convention loads about 1.1k tokens when it runs. Until then it costs about 47 tokens; SKILL.md has 338 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from TheBeardedBearSAS/claude-craft at commit 99c1ee3, republished under its MIT licence (© TheBeardedBearSAS). 338 words, ~1,083 tokens.
Download SKILL.mdSave it as
.claude/skills/design-md-convention/SKILL.md (or your agent's skills folder).- name
- design-md-convention
- description
- Convention DESIGN.md pour design systems AI-friendly. Use when setting up a new project UI, documenting design tokens, or generating UI consistent with a design system.
- context
- fork files: ["DESIGN.md", "tailwind.config.*", "tokens.json"]
DESIGN.md — Convention Design System AI-Friendly
Convention inspirée de VoltAgent/awesome-design-md (55+ design systems populaires, concept Google Stitch).
Principe : un fichier DESIGN.md en markdown à la racine du projet sert de source de vérité pour les agents IA qui génèrent ou modifient l'UI. Pas de Figma, pas de JSON complexe, juste du texte lisible par humain et par LLM.
Pourquoi DESIGN.md ?
| Problème sans DESIGN.md | Solution avec DESIGN.md |
|---|---|
| IA génère des couleurs aléatoires | IA lit la palette définie |
| Incohérence spacing entre composants | IA applique l'échelle documentée |
| Typographie variable | IA utilise les tokens définis |
| Onboarding designer/dev lent | DESIGN.md = réponse unique |
| Dépendance à Figma pour chaque décision | Markdown versionné avec le code |
Structure recommandée
Un DESIGN.md contient 7 sections obligatoires :
- Principes visuels — ton, personnalité, do/don't
- Design tokens — couleurs, typographie, espacements, rayons, ombres
- Grille & layout — breakpoints, colonnes, gutters, container widths
- Composants — liste + variantes + règles d'usage
- Patterns d'interaction — hover, focus, active, disabled, loading
- Accessibilité — niveau cible (AA/AAA), contrastes, focus rings
- Références — lien vers Figma (optionnel), design system inspiré
Voir .claude/templates/DESIGN.md.template pour la structure complète.
Règles de rédaction
1. Concis et structuré
- Tableaux > prose
- Tokens > valeurs hardcoded
- Exemples concrets > théorie
2. Tokens nommés, pas valeurs brutes
❌ MAUVAIS
Primary button: background #3B82F6
✅ BON
| Token | Valeur | Usage |
|-------|--------|-------|
| `color.primary.500` | #3B82F6 | Boutons primaires, liens actifs |
| `color.primary.600` | #2563EB | Hover des éléments primaires |3. Do / Don't explicites
### Boutons
**DO**
- Utiliser `button.primary` pour l'action principale d'un écran (1 max)
- Utiliser `button.secondary` pour actions secondaires
**DON'T**
- Jamais 2 boutons primaires sur le même écran
- Jamais de couleur custom hors palette4. Versionner avec le code
DESIGN.md est dans le repo, reviewé en PR au même titre que le code.
Intégration avec agents Claude Craft
Les agents suivants lisent DESIGN.md par défaut :
@ui-designer— génère UI conforme aux tokens@ux-ergonome— valide les patterns d'interaction@accessibility-expert— vérifie contrastes vs niveau cible@{react,vue,angular}-reviewer— flag les valeurs hardcoded
Workflow recommandé
1. Nouveau projet → copier .claude/templates/DESIGN.md.template à la racine
2. Remplir les 7 sections (30-60 min)
3. Commiter DESIGN.md
4. Référencer depuis @.claude/CLAUDE.md projet : "@DESIGN.md"
5. Les agents IA le chargent automatiquement
6. Mettre à jour à chaque évolution du design systemGénération assistée
Command dédiée (Phase 4) : /uiux:generate-design-md
- Analyse
tailwind.config.jsou tokens existants - Pré-remplit les sections
- Demande validation sur les zones ambiguës
Exemples de DESIGN.md inspirants
- Stripe Dashboard
- Linear
- Vercel
- Liste complète : awesome-design-md
Anti-patterns
| Anti-pattern | Solution |
|---|---|
| DESIGN.md > 500 lignes | Extraire sous-fichiers docs/design/*.md |
| Prose sans tableaux | Reformater en tokens structurés |
| Pas de do/don't | Ajouter règles explicites |
| Screenshots uniquement | Compléter par description textuelle (LLM ne voit pas toujours les images) |
| Désynchro avec code | Ajouter check CI (lint tokens) |
Date de dernière mise à jour : 2026-04-15 Version : 1.0.0
© TheBeardedBearSAS, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
Just SKILL.md in .claude/skills/design-md-convention of TheBeardedBearSAS/claude-craft.
Open the folder on GitHubat commit 99c1ee3
Compare with similar skills
Design Md Convention next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Design Md Convention this skillTheBeardedBearSAS/claude-craft | 107 | — | ~1.1k | Automated safety check: Pass | MIT | |
| Figma Design System Builderwarpdotdev/warp | 65k | 2 repos | ~4.4k | Automated safety check: Pass | AGPL-3.0 | |
| Figma use_figma Plugin API Ruleswarpdotdev/warp | 65k | 4 repos | ~4.4k | Automated safety check: Pass | AGPL-3.0 | |
| Figma Screen Generatorwarpdotdev/warp | 65k | 2 repos | ~5k | Automated safety check: Pass | AGPL-3.0 | |
| Extract DesignManavarya09/design-extract | 4.2k | — | ~786 | Automated safety check: Notes | MIT | |
| Qt Figma Component GenerationTheQtCompanyRnD/agent-skills | 470 | — | ~4.1k | Automated safety check: Pass | BSD-3-Clause |
Similar skills
Figma use_figma Plugin API Rules
warpdotdev/warp
Required groundwork before any use_figma call: the rules and reference files for running JavaScript in a Figma file through the Plugin API without common failures.
Figma Screen Generator
warpdotdev/warp
Builds or updates full Figma screens from code or a description by reusing the file's published design system components, variables and styles.
Extract Design
Manavarya09/design-extract
Extract the full design language from any website URL. An agent skill from Manavarya09/design-extract.
Qt Figma Component Generation
TheQtCompanyRnD/agent-skills
Extract component metadata from a Figma design system and generate production-ready QML controls.
AnyDesign
uxKero/anydesign
Extracts the design of a screenshot, website URL or Figma file into a design.md of tokens, components, layout and brand rules, or copies one element into element.md.
More from TheBeardedBearSAS/claude-craft
All 12 skills in this repoArchitect
TheBeardedBearSAS/claude-craft
Phase d'architecture systématique AVANT le code (TDD). An agent skill from TheBeardedBearSAS/claude-craft.
Async
TheBeardedBearSAS/claude-craft
Architecture async-first avec messaging et queues (Symfony Messenger, Laravel Queue, Ecotone).
Atomic Tasks
TheBeardedBearSAS/claude-craft
Pattern GSD (Get Shit Done) - découper en tâches atomiques avec contextes subagent frais pour combattre le context rot.
Cqrs
TheBeardedBearSAS/claude-craft
CQRS - Command Query Responsibility Segregation. An agent skill from TheBeardedBearSAS/claude-craft.
Docker Hadolint
TheBeardedBearSAS/claude-craft
Docker & Hadolint validation (2026). An agent skill from TheBeardedBearSAS/claude-craft.
Dynamic Workflows
TheBeardedBearSAS/claude-craft
Orchestrate dozens-to-hundreds of subagents from a script Claude writes (Claude Code Dynamic Workflows, trigger ultracode).
Related
Works with
Categories
Questions about Design Md Convention
What does Design Md Convention do?
Convention DESIGN.md pour design systems AI-friendly. An agent skill from TheBeardedBearSAS/claude-craft. Design Md Convention is an agent skill from TheBeardedBearSAS/claude-craft.md pour design systems AI-friendly.
When should I use Design Md Convention?
Design Md Convention fits situations like: setting up a new project UI; documenting design tokens; generating UI consistent with a design system.
How do I install Design Md Convention in Claude Code?
Run `npx skills add TheBeardedBearSAS/claude-craft --skill design-md-convention -a claude-code`. Or copy the skill folder (.claude/skills/design-md-convention in TheBeardedBearSAS/claude-craft) into .claude/skills/design-md-convention in your project. Claude Code loads it when a task matches its description.
How do I install Design Md Convention in Codex?
Run `npx skills add TheBeardedBearSAS/claude-craft --skill design-md-convention -a codex`. Or copy the skill folder (.claude/skills/design-md-convention in TheBeardedBearSAS/claude-craft) into .agents/skills/design-md-convention in your project. Codex loads it when a task matches its description.
Can I use Design Md Convention in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add TheBeardedBearSAS/claude-craft --skill design-md-convention -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/design-md-convention, .gemini/skills/design-md-convention, .github/skills/design-md-convention and .opencode/skills/design-md-convention in your project.
What does Design Md Convention need to run?
SKILL.md names no scripts, command-line tools or credentials: Design Md Convention is instructions for the agent only.
Does Design Md Convention access the network?
SKILL.md names 1 domain. As links in the text: github.com. This is read from the text; nothing was executed.
Is Design Md Convention safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Design Md Convention use?
Design Md Convention is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Design Md Convention use?
About 1.1k tokens (SKILL.md is roughly 4.3k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Design Md Convention?
Skills that share tags, products or a category with Design Md Convention: Figma Design System Builder (warpdotdev/warp, 65k stars), Figma use_figma Plugin API Rules (warpdotdev/warp, 65k stars), Figma Screen Generator (warpdotdev/warp, 65k stars) and Extract Design (Manavarya09/design-extract, 4.2k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Design Md Convention?
TheBeardedBearSAS (a GitHub organization) maintains it in TheBeardedBearSAS/claude-craft, which has 107 GitHub stars. The repository holds 12 skills in this directory. The repository was last updated on September 14, 2026.
Source: TheBeardedBearSAS/claude-craft on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.