Exécuter Claude Design localement en tant que compétence d'agent avec baoyu-design
Exécutez Claude Design localement en tant que compétence d'agent pour Cursor, Claude Code et plus encore. Produisez des maquettes UI soignées, des prototypes et des wireframes sous forme de HTML autonome.
Qu'est-ce que baoyu-design ?
baoyu-design regroupe le moteur de conception derrière claude.ai/design dans une compétence d'agent portable. Au lieu de dépendre du site web hébergé par Anthropic, vous déposez cette compétence dans votre agent de codage local — Cursor, Claude Code, Codex ou l'un des 70+ agents compatibles — et vous obtenez le même résultat de conception de haute qualité directement dans votre éditeur.
Le résultat : des maquettes UI soignées, des prototypes interactifs, des wireframes, des pages d'atterrissage, des tableaux de bord, des applications mobiles et des présentations — tous produits sous forme de fichiers HTML autonomes qui vivent dans votre dépôt. Pas de site web, pas d'abonnement séparé, pas d'étape de téléchargement.
Pourquoi l'exécuter localement ?
Liberté par rapport au site web
Vous obtenez la grande majorité des capacités de claude.ai/design sans jamais quitter votre éditeur. Même méthodologie, mêmes normes de qualité, même format de sortie — mais entièrement local.
Meilleur avec Opus 4.8
La compétence est un brief de conception long et exigeant. Plus le modèle est puissant, meilleur est le résultat. Associez-la à Claude Opus 4.8 pour le meilleur résultat, bien qu'elle fonctionne également bien sur d'autres modèles capables.
Itérez en pointant, pas en décrivant
Comme le livrable est du HTML simple servi sur localhost, vous pouvez vous appuyer sur l'aperçu navigateur intégré de votre agent et les outils d'annotation d'éléments (Cursor Browser / DevTools, Claude Preview ou Codex Browser). Pointez sur un bouton dans l'aperçu en direct, dites ce que vous voulez changer, et l'agent modifie le code source sous-jacent — une boucle d'édition visuelle serrée en second passage difficile à obtenir sur un site web.
Tout vous appartient
La sortie atterrit dans designs/<projet>/ sous forme de HTML autonome que vous pouvez versionner, forker, exporter ou expédier. Pas de verrouillage fournisseur.
Ce qu'elle peut créer
La compétence pilote un processus de conception complet — questions de clarification → collecte du contexte de conception → production d'un ou plusieurs livrables HTML → prévisualisation et vérification. Elle embarque 24 compétences intégrées et un ensemble d'échafaudages de composants prêts à l'emploi.
| Domaine | Compétences intégrées |
|---|---|
| Conception de base | Conception haute-fidélité · Prototype interactif · Wireframe · Direction esthétique frontend |
| Présentations | Créer une présentation · Notes de l'orateur |
| Mobile et animation | Prototype mobile · Vidéo animée · Effets sonores |
| Systèmes de conception | Créer un système de conception · Composants de conception (.dc.html) · Rendre paramétrable |
| Export et transmission | HTML autonome · PDF · PPTX (modifiable) · PPTX (captures d'écran) · Envoyer à Figma · Envoyer à Canva · Transmission à Claude Code |
| Actifs IA et intégration | Génération d'images Gemini · Appeler Claude depuis des prototypes · Lire un PDF |
Composants de démarrage (dans starter-components/) évitent à l'agent de réinventer les bases : cadres iOS / Android / macOS / navigateur, un canevas de conception panoramique-zoom, une scène de présentation, un moteur d'animation chronologique, un panneau de réglages et un emplacement d'image remplissable.
Comment ça fonctionne
La compétence est du Markdown simple plus quelques échafaudages JSX/JS — pas d'étape de construction, pas d'exécution.
skills/baoyu-design/
├── SKILL.md # Point d'entrée — orchestre tout le flux
├── system-prompt.md # La méthodologie de conception et les normes de qualité (source de vérité)
├── references/
│ ├── claude.md # Carte des outils pour Claude Code
│ ├── cursor.md # Carte des outils pour Cursor
│ └── codex.md # Carte des outils pour Codex Agent
├── built-in-skills/ # 24 prompts spécialisés (présentations, mobile, export, …)
└── starter-components/ # Cadres d'appareils, scène de présentation, canevas, moteur d'animation, …
Lorsque vous demandez une conception, l'agent lit SKILL.md, charge la méthodologie principale depuis system-prompt.md, détecte s'il fonctionne dans Cursor, Claude Code, Codex Agent ou un environnement générique capable de gérer des fichiers, et lit le document de référence correspondant lorsqu'il existe. Il importe ensuite uniquement la ou les compétences intégrées nécessaires à la tâche. La séparation maintient les règles de conception indépendantes de l'environnement tandis que chaque environnement résout ses propres outils pour poser des questions, prévisualiser, capturer des écrans et vérifier.
Démarrage rapide
Prérequis
- Un agent local — Cursor, Claude Code, Codex, ou l'un des 70+ agents pris en charge par l'installateur (Cline, Roo Code, GitHub Copilot…). Cursor, Claude Code et Codex disposent de références d'outils de première classe dans la compétence.
- Claude Opus 4.8 sélectionné comme modèle, pour de meilleurs résultats.
- Node.js (pour exécuter l'installateur
npxci-dessous). Python 3 est également utile pour le serveur de prévisualisation local.
Installer
Recommandé — l'interface CLI skills. npx skills (de Vercel Labs) lit ce dépôt, trouve skills/baoyu-design/, et le place dans le dossier approprié pour l'agent qu'il détecte :
# Installer dans le projet courant (détecte automatiquement votre agent)
npx skills add JimLiu/baoyu-design
# …ou installer globalement, pour chaque projet
npx skills add JimLiu/baoyu-design -g
# Cibler un agent spécifique explicitement
npx skills add JimLiu/baoyu-design --agent claude-code
npx skills add JimLiu/baoyu-design --agent cursor
npx skills add JimLiu/baoyu-design --agent codex
# Lister d'abord ce qui se trouve dans le dépôt
npx skills add JimLiu/baoyu-design --list
Il s'installe dans .claude/skills/ pour Claude Code et .agents/skills/ pour les agents de type Cursor/Codex (ajoutez -g pour l'installation utilisateur au niveau ~/).
Alternative — donnez l'URL du dépôt à votre agent. Vous ne voulez rien installer ? Collez l'URL dans le chat et laissez l'agent récupérer la compétence lui-même :
Lisez https://github.com/JimLiu/baoyu-design et suivez son skills/baoyu-design/SKILL.md pour concevoir un écran de paramètres pour une application de méditation.
L'agent clone ou récupère le dépôt, charge SKILL.md, et procède — parfait pour un usage unique.
L'utiliser
Une fois la compétence installée (ou récupérée), décrivez simplement une tâche de conception en langage naturel — elle s'active automatiquement à partir de sa description :
Concevez 3 variations haute-fidélité d'un écran de paramètres pour une application de méditation.
Dans Claude Code, vous pouvez également la déclencher explicitement avec /baoyu-design ; dans Codex, mentionnez $baoyu-design lorsque les compétences sont disponibles. L'agent pose quelques questions de clarification, construit le HTML sous designs/, et le prévisualise sur localhost. Pointez sur n'importe quel élément dans l'aperçu en direct et dites ce qu'il faut changer — l'agent modifie le code source sous-jacent pour un second passage visuel rapide.
Serveur de prévisualisation
Les livrables sont prévisualisés via HTTP (les prototypes multi-fichiers ne se chargent pas depuis file://). L'agent le démarre normalement pour vous ; pour l'exécuter manuellement :
python3 -m http.server 4311 --directory designs
# puis ouvrez http://localhost:4311/<projet>/<fichier>.html
Systèmes de conception
Au-delà des maquettes ponctuelles, la compétence peut maintenir un projet entier conforme à un système de conception — un ensemble versionné des tokens, polices, composants et kits UI complets d'une marque. Les systèmes vivent à côté de vos projets sous designs/ : créez-en un avec la compétence intégrée Créer un système de conception, ou déposez-en un pré-construit. Une fois qu'un système existe, deux flux permettent à tout projet de l'utiliser.
Importer un système de conception existant
Lorsque vous démarrez une conception, l'agent demande où l'enregistrer et quel(s) système(s) de conception utiliser — il découvre chaque système sous designs/ et les liste, afin que vous puissiez choisir aucun (conception libre), un ou plusieurs. Nommez-en un dès le départ et il saute le menu :
Concevez un écran de paramètres en utilisant le système de conception Fluent 2.
Pour chaque système que vous choisissez, l'agent synchronise une copie autonome et verrouillée par version dans votre projet à _ds/<slug>/, intègre son CSS et son bundle de composants dans la page, et enregistre la liaison dans le fichier _d_meta.json du projet. Cette copie locale est ce qui rend le projet portable et reproductible — rien n'accède à l'extérieur du dossier, et réexécuter l'importation est la façon de récupérer les mises à jour ultérieurement. Choisissez plusieurs systèmes et l'un devient principal — il possède l'apparence globale et gagne tout conflit de tokens, tandis que les autres prêtent des composants spécifiques.
Utiliser un système de conception importé
Une fois qu'un système est lié, il agit comme un contrat visuel contraignant, pas comme une suggestion vague : chaque écran est construit à partir des tokens, de la typographie, de l'espacement et des composants réels du système, et l'agent n'inventera pas de couleurs ou de styles hors système. Si le système propose des points de départ — écrans ou composants prêts à l'emploi — vous pouvez amorcer une nouvelle conception à partir de l'un d'eux au lieu de partir de zéro.
La liaison voyage avec le projet. Rouvrez-le plus tard et l'agent lit _d_meta.json, recharge le système et continue à concevoir dans le style — pas besoin de re-sélectionner. À partir de là, vous pouvez actualiser un système pour récupérer les mises à jour, en ajouter un autre, changer celui qui est principal ou en supprimer un complètement.
Exemples de prompts
- "Concevez 3 variations haute-fidélité d'une page de tarification en utilisant la marque de cette capture d'écran."
- "Prototypez un flux d'intégration fonctionnel — état réel, transitions, validation de formulaire."
- "Créez une présentation de 10 diapositives à partir de ce PRD pour une réunion générale d'ingénierie."
- "Esquissez quelques idées de mise en page pour un écran d'accueil de suivi de dépenses mobile."
- "Reconstituez l'interface compositeur de cette base de code, puis exportez-la en HTML autonome."
- "Construisez un tableau de bord en utilisant notre système de conception, en partant de son écran d'analyse."
Pour de meilleurs résultats, donnez-lui un contexte de conception — une capture d'écran, un kit UI, un lien Figma ou une base de code. Partir d'un contexte réel est le levier le plus important sur la qualité ; la compétence le demandera si vous ne le fournissez pas.
Crédits et licence
Ce projet réemballe Claude Design, la compétence de conception d'Anthropic qui alimente claude.ai/design, afin qu'elle puisse fonctionner sur des agents locaux. Il s'agit d'un effort communautaire indépendant et n'est pas affilié ni approuvé par Anthropic.
Réemballé et maintenu par Jim Liu 宝玉. Publié sous la licence MIT.