Aller au guide d’utilisation
designpar nextlevelbuilder

Design Skill.

Un skill Claude Code et Codex pour le travail de marque et de design system : identité de marque, tokens de design, stylisation UI, génération de logo et programmes d'identité d'entreprise.

  • Marque et design systems
nextlevelbuilder/ui-ux-pro-max-skill · .claude/skills/design/SKILL.mdSKILL.md
--- name: design description: Comprehensive design skill: brand identity, design tokens, UI styling, logo generation (55 styles, Gemini, Atlas Cloud, or MuAPI AI), corporate identity program (50 deliverables, CIP mockups), HTML presentations (Chart.js), banner design (22 styles, social/ads/web/print), icon design (15 styles, SVG, Gemini 3.1 Pro), social photos (HTML→screenshot, multi-platform). Actions: design logo, create CIP, generate mockups, … --- ## When to Use ## Sub-skill Routing ## Script Paths ## Logo Design (Built-in) ## CIP Design (Built-in) ## Slides (Built-in)
Métadonnées et titres de section lus depuis le fichier source le 14 septembre 2026 · 13 348 caractères au total

01 Ce qu'il fait

Ce que fait le Skill de design 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

Skill de design unifié couvrant l'identité de marque, les tokens de design, le style d'UI avec shadcn/ui et Tailwind, la génération de logo (55 styles via Gemini, Atlas Cloud ou MuAPI), les programmes d'identité corporate avec 50 livrables, les présentations HTML utilisant Chart.js, le design de bannières (22 styles de direction artistique pour réseaux sociaux, publicités, web, print), le design d'icônes (15 styles, sortie SVG via Gemini 3.1 Pro), et le design de photos pour réseaux sociaux sur Facebook, Twitter, LinkedIn, YouTube, Instagram, Pinterest, TikTok et Threads. Redirige vers des sous-skills externes pour la marque, le design-system et l'ui-styling, tout en fournissant des workflows intégrés pour les logos, CIP, slides, bannières, icônes et photos sociales avec des scripts Python, la génération par IA et l'export HTML-to-screenshot.

Ce qu'il produit

  • Captures d'écran PNG de bannières aux dimensions exactes de la plateforme, exportées via chrome-devtools
  • Fichiers d'icônes SVG en 15 styles avec exports multi-tailles optionnels et variations par lot
  • Images pour réseaux sociaux aux dimensions spécifiques à la plateforme, stockées dans des répertoires d'assets organisés
Voir l'exemple de prompt ↗

Fonctionnement

  1. 01
    Router par type de tâche

    Le skill répartit l'identité et la voix de marque vers le sous-skill brand, les tokens et spécifications vers design-system, le code shadcn/ui et Tailwind vers ui-styling, et gère les logos, CIP, slides, bannières, icônes et photos sociales avec des workflows intégrés.

  2. 02
    Générer des logos avec des fournisseurs d'IA

    Exécutez des scripts Python pour rechercher parmi 55 styles, 30 palettes de couleurs et 25 guides sectoriels, puis générez des logos via Gemini Nano Banana, Atlas Cloud ou MuAPI avec des fonds blancs.

  3. 03
    Créer des livrables CIP avec des maquettes

    Générez des maquettes de programme d'identité corporate pour 50 livrables en utilisant les modèles Gemini Flash ou Pro, éventuellement avec superposition de logo, puis rendez des présentations HTML du résultat.

  4. 04
    Créer des présentations HTML stratégiques

    Créez des présentations avec intégration de Chart.js, des tokens de design et des formules de rédaction en chargeant la référence du workflow de création de diapositives.

  5. 05
    Concevoir des bannières avec HTML/CSS

    Recueillez les besoins, effectuez des recherches sur Pinterest via ui-ux-pro-max, concevez des bannières HTML/CSS avec frontend-design et ai-artist/ai-multimodal pour les visuels, puis exportez via chrome-devtools aux dimensions exactes.

  6. 06
    Exporter et vérifier les captures d'écran

    Utilisez chrome-devtools ou Playwright pour capturer des designs aux dimensions exactes en pixels avec un facteur d'échelle d'appareil de 2x, puis inspectez visuellement et corrigez les problèmes de mise en page avant l'export final.

02 Trouvez celui qui vous convient

Quand utiliser le skill design

Utilisez le skill design dans Claude Code ou Codex lorsque le travail relève de la marque et du design-system de ce type. Adéquation et limites ci-dessous sont tirées du fichier propre du skill.

Bon choix

  • Création de packages d'identité de marque avec logo, livrables d'identité d'entreprise et présentations de pitch deck
  • Conception d'images multi-plateformes pour les réseaux sociaux : Instagram, Facebook, LinkedIn, Twitter, Pinterest et TikTok
  • Génération de bannières pour couvertures de réseaux sociaux, campagnes publicitaires, en-têtes de sites web et supports imprimés
  • Construction de systèmes de design avec tokens sémantiques, configuration Tailwind et composants shadcn/ui

Connaître les limites

  • Le générateur d'icônes produit uniquement une sortie texte SVG, pas de fichiers image raster

Quoi fournir

  • Clé API GeminiVariable d'environnement requise pour la génération de logos, CIP et icônes via Google AI Studio
  • Clé API MuAPI (optionnelle)Variable d'environnement optionnelle pour utiliser MuAPI comme fournisseur alternatif de génération d'images pour les logos
  • Chemin du fichier logo pour CIPChemin vers un fichier logo PNG existant à superposer sur les livrables d'identité d'entreprise lors de la génération de maquettes CIP
  • Exigences de bannière via AskUserQuestionObjectif, plateforme, contenu, charte graphique, style de direction artistique et quantité recueillis de manière interactive avant la conception de la bannière
  • Contexte de marque pour les photos socialesCharte graphique issue du sous-skill brand et tokens de design issus de design-system pour maintenir la cohérence entre les images des réseaux sociaux

03 Dans le skill

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

8 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.

  1. Toujours générer les logos avec des fonds blancs

    La génération de logos doit produire des images de sortie avec des fonds blancs dans tous les cas.

  2. Les chemins de script sont relatifs au répertoire du skill

    Les chemins de script dans ce skill et son dossier references sont relatifs au répertoire contenant SKILL.md, et non à la racine du projet.

  3. Demander à l'utilisateur un aperçu HTML après la génération du logo

    Après avoir généré les logos, demandez toujours à l'utilisateur via AskUserQuestion s'il souhaite une galerie d'aperçu HTML, et si oui, invoquez le skill ui-ux-pro-max pour la créer.

  4. Corriger directement les scripts en échec

    Lorsque des scripts Python échouent à l'exécution, tenter de les corriger directement plutôt que de signaler l'erreur.

  5. Utiliser la superposition de logo recommandée pour le CIP

    Pour générer des maquettes CIP, utiliser un fichier de logo existant avec l'indicateur --logo est l'approche recommandée.

  6. Le texte des bannières doit rester sous les 20 % pour les publicités

    Pour les bannières publicitaires, garder la couverture textuelle sous les 20 % de la surface totale, car les plateformes Meta pénalisent les publicités trop chargées en texte.

  7. Utiliser Python plutôt que Python3 sur Windows

    Sur les systèmes Windows, remplacer python3 par python dans tous les exemples de commandes du skill.

  8. Contenu critique des bannières dans les zones de sécurité centrales

    Placer tout le contenu critique de la bannière dans la zone de sécurité centrale de 70-80 % pour garantir sa visibilité sur toutes les plateformes.

04 Mettez-le en pratique

Installer design 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 à 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/nextlevelbuilder/ui-ux-pro-max-skill --skill design

Forme CLI générique skills pour .claude/skills/design/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
Design a complete brand package for [TechFlow], a B2B SaaS startup in the fintech space. Create a minimalist logo with tech-appropriate colors, generate a full corporate identity program including business cards, letterhead, and email signature, then build a 10-slide pitch deck presentation with our Q4 metrics [revenue chart data] and competitive positioning [market analysis]. Export everything with consistent design tokens.

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 :

  • Vérifier que les CTA des bannières respectent la hauteur minimale de 44px et sont positionnés en bas à droite
  • S'assurer que les bannières imprimées utilisent 300 DPI, le mode couleur CMJN, et incluent un fond perdu de 3-5mm

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

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.

Fichier du skill
.claude/skills/design/SKILL.md Somme de contrôle du contenu enregistrée à la vérification ; commit 7f69fed
License
MIT D'après LICENSE ; SKILL.md indique « MIT ».
Étoiles du dépôt
127 450 Instantané GitHub pris le 14/09/2026 pour l'ensemble du dépôt nextlevelbuilder/ui-ux-pro-max-skill, qui contient 7 skills dans ce catalogue. Pas un décompte d'évaluation ou d'usage pour design.
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

  1. Quand l'utiliserListe les cas d'usage : identité de marque, tokens de design, style UI, logos, CIP, présentations, bannières, photos sociales, icônes
  2. Routage vers des sous-skillsAchemine les tâches vers des skills externes de marque/design system/ui-styling ou vers des workflows intégrés logo/CIP/slides/bannière/réseaux sociaux/icônes
  3. Chemins des scriptsExplique que les chemins des scripts sont relatifs au répertoire du skill, non à la racine du projet
  4. Design de logo (intégré)Commandes pour rechercher parmi 55 styles et générer des logos via Gemini, Atlas Cloud, ou MuAPI avec des fonds blancs
  5. Design CIP (intégré)Commandes pour rechercher parmi 50 livrables et générer des maquettes d'identité d'entreprise avec les modèles Flash ou Pro
  6. Slides (intégré)Référence la création de présentations HTML stratégiques avec Chart.js et des formules de copywriting
  7. Design de bannière (intégré)Workflow pour concevoir 22 styles de direction artistique en utilisant frontend-design, ai-artist, et chrome-devtools pour l'export
  8. Design d'icônes (intégré)Commandes pour générer des icônes SVG dans 15 styles en utilisant la sortie texte uniquement de Gemini 3.1 Pro
  9. Photos sociales (intégré)Workflow pour la conception d'images sociales multi-plateformes, du HTML à l'export en capture d'écran avec vérification
  10. WorkflowsSéquences pour des packages de marque complets et la création de nouveaux systèmes de design à travers les sous-skills
  11. PrérequisExigence Python avec des instructions de commande spécifiques à Windows pour python vs python3
  12. ConfigurationVariables d'environnement pour les clés API Gemini et MuAPI, ainsi que l'installation des paquets Python
Description du skill lui-même
Skill design complet : identité de marque, design tokens, stylisation UI, génération de logos (55 styles, Gemini, Atlas Cloud ou MuAPI AI), programme d'identité visuelle (50 livrables, maquettes CIP), présentations HTML (Chart.js), conception de bannières (22 styles, réseaux sociaux/publicité/web/print), conception d'icônes (15 styles, SVG, Gemini 3.1 Pro), photos pour réseaux sociaux (HTML→capture d'écran, multi-plateformes). Actions : design logo, create CIP, generate mockups, build slides, design banner, generate icon, create social photos, social media images, brand identity, design system. Plateformes : Facebook, Twitter, LinkedIn, YouTube, Instagram, Pinterest, TikTok, Threads, Google Ads.

Description front-matter extraite de SKILL.md. Le fichier complet fait environ 13 348 caractères. Lire le fichier complet sur GitHub.

06 Avant d'installer

Questions à propos du skill design

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

Comment exécuter des scripts Python sous Windows ?

Remplacez python3 par python dans tous les exemples de commandes. Par exemple, utilisez python scripts/logo/search.py au lieu de python3 scripts/logo/search.py. Il en va de même pour les commandes pip, où vous devrez peut-être utiliser python -m pip install.

Design

Exécuter design sur une vraie marque et une tâche de travail design-system.

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

Terminal
npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill design

OpenDesign Desktop

Un seul design system. Votre marque, cohérente partout

Dans le Vibe Design Workspace complet, appliquez les mêmes règles de marque aux sites, slides, prototypes interactifs, dashboards, images et vidéos HTML. Connectez Codex, Claude Code, Cursor et vos autres agents de code locaux, puis créez gratuitement.

  • Sites, slides, prototypes, dashboards, images et vidéos
  • Plus de 140 design systems et la bibliothèque complète de modèles et skills
  • Codex local et plus de 21 agents de code · Gratuit
Télécharger gratuitement

Disponible sur macOS et Windows