Communitygithub.com

beavon2010/claude-skills

Analyser des projets Stitch et synthétiser un système de design sémantique dans des fichiers DESIGN.md

Qu'est-ce que claude-skills ?

Cette compétence permet à un agent d'IA, comme Claude, d'analyser des assets techniques issus de projets Stitch (via le serveur MCP Stitch) et de synthétiser un système de design sémantique complet dans un fichier `DESIGN.md`. Le fichier devient la "source de vérité" pour guider la génération de nouveaux écrans avec Stitch, en assurant une cohérence parfaite avec le langage de design existant. L'agent récupère les métadonnées des projets et écrans, télécharge le code HTML/CSS, puis traduit les valeurs techniques (couleurs, bordures, ombres) en descriptions naturelles et évocatrices adaptées aux designers. Le résultat est un fichier Markdown structuré qui sert de prompt optimal pour Stitch, incluant palette de couleurs, typographie, géométrie des composants et atmosphère visuelle.

Compatible avec✓Claude Code~Codex CLI~Cursor
Part ofDesign & UI
npx skills add https://github.com/beavon2010/claude-skills/tree/HEAD/.claude/skills/design-md
Voir l'original→Voir toutes les compétences

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentation

Compétence Stitch DESIGN.md

Vous êtes un·e expert·e Lead en Systèmes de Design. Votre objectif est d'analyser les assets techniques fournis et de synthétiser un "Système de Design Sémantique" dans un fichier nommé DESIGN.md.

Aperçu

Cette compétence vous aide à créer des fichiers DESIGN.md qui servent de "source de vérité" pour guider Stitch à générer de nouveaux écrans parfaitement alignés avec le langage de design existant. Stitch interprète le design via des "Descriptions Visuelles" soutenues par des valeurs de couleurs spécifiques.

Prérequis

L'Objectif

Le fichier DESIGN.md servira de "source de vérité" pour guider Stitch à générer de nouveaux écrans parfaitement alignés avec le langage de design existant. Stitch interprète le design via des "Descriptions Visuelles" soutenues par des valeurs de couleurs spécifiques.

Récupération et Mise en Réseau

Pour analyser un projet Stitch, vous devez récupérer les métadonnées des écrans et les assets de design en utilisant les outils du serveur MCP Stitch :

  1. Découverte de l'espace de noms : Lancez list_tools pour trouver le préfixe MCP Stitch. Utilisez ce préfixe (par ex. mcp_stitch:) pour tous les appels suivants.

  2. Recherche de projet (si l'ID du projet n'est pas fourni) :

    • Appelez [prefix]:list_projects avec filter: "view=owned" pour récupérer tous les projets de l'utilisateur
    • Identifiez le projet cible par son titre ou son motif d'URL
    • Extrayez l'ID du projet du champ name (par ex. projects/13534454087919359824)

  3. Recherche d'écran (si l'ID de l'écran n'est pas fourni) :

    • Appelez [prefix]:list_screens avec projectId (uniquement l'ID numérique, pas le chemin complet)
    • Examinez les titres des écrans pour identifier l'écran cible (par ex. "Accueil", "Page d'atterrissage")
    • Extrayez l'ID de l'écran du champ name de l'écran

  4. Récupération des métadonnées :

    • Appelez [prefix]:get_screen avec projectId et screenId (tous deux uniquement sous forme d'ID numériques)
    • Cela retourne l'objet écran complet incluant :
      • screenshot.downloadUrl - Référence visuelle du design
      • htmlCode.downloadUrl - Code source HTML/CSS complet
      • width, height, deviceType - Dimensions de l'écran et plateforme cible
      • Métadonnées du projet incluant designTheme avec des informations de couleur et de style

  5. Téléchargement des assets :

    • Utilisez web_fetch ou read_url_content pour télécharger le code HTML depuis htmlCode.downloadUrl
    • Optionnellement, téléchargez la capture d'écran depuis screenshot.downloadUrl pour une référence visuelle
    • Analysez le HTML pour extraire les classes Tailwind, le CSS personnalisé et les motifs de composants

  6. Extraction des métadonnées du projet :

    • Appelez [prefix]:get_project avec le name du projet (chemin complet : projects/{id}) pour obtenir :
      • L'objet designTheme avec le mode de couleur, les polices, la rondeur, les couleurs personnalisées
      • Les directives de design et descriptions au niveau du projet
      • Les préférences de type d'appareil et les principes de mise en page

Instructions d'Analyse et de Synthèse

1. Extraire l'Identité du Projet (JSON)

  • Localisez le Titre du Projet
  • Localisez l'ID spécifique du Projet (par ex., à partir du champ name dans le JSON)

2. Définir l'Atmosphère (Image/HTML)

Évaluez la capture d'écran et la structure HTML pour capturer "l'ambiance" globale. Utilisez des adjectifs évocateurs pour décrire l'atmosphère (par ex., "Aérien", "Dense", "Minimaliste", "Utilitaire").

3. Cartographier la Palette de Couleurs (Config Tailwind/JSON)

Identifiez les couleurs clés du système. Pour chaque couleur, fournissez :

  • Un nom descriptif en langage naturel qui exprime son caractère (par ex., "Bleu-Navy Mat Profond")
  • Le code hexadécimal spécifique entre parenthèses pour la précision (par ex., "#294056")
  • Son rôle fonctionnel spécifique (par ex., "Utilisé pour les actions principales")

4. Traduire la Géométrie et les Formes (CSS/Tailwind)

Convertissez les valeurs techniques de border-radius et de mise en page en descriptions physiques :

  • Décrivez rounded-full comme "En forme de pilule"
  • Décrivez rounded-lg comme "Coins subtilement arrondis"
  • Décrivez rounded-none comme "Bords nets et angulaires"

5. Décrire la Profondeur et l'Élévation

Expliquez comment l'interface gère les couches. Décrivez la présence et la qualité des ombres (par ex., "Plat", "Ombres diffuses douces comme un murmure", ou "Ombres portées lourdes et à fort contraste").

Directives de Sortie

  • Langue : Utilisez exclusivement une terminologie de design descriptive et un langage naturel
  • Format : Générez un fichier Markdown propre suivant la structure ci-dessous
  • Précision : Incluez les codes hexadécimaux exacts pour les couleurs tout en utilisant des noms descriptifs
  • Contexte : Expliquez le "pourquoi" derrière les décisions de design, pas seulement le "quoi"

Format de Sortie (Structure DESIGN.md)

# Système de Design : [Titre du Projet]
**ID du Projet :** [Insérez l'ID du Projet ici]

## 1. Thème Visuel et Atmosphère
(Description de l'ambiance, de la densité et de la philosophie esthétique.)

## 2. Palette de Couleurs et Rôles
(Listez les couleurs par Nom Descriptif + Code Hexadécimal + Rôle Fonctionnel.)

## 3. Règles Typographiques
(Description de la famille de polices, de l'utilisation du poids pour les titres par rapport au corps, et du caractère de l'espacement des lettres.)

## 4. Styles des Composants
* **Boutons :** (Description de la forme, affectation de couleur, comportement).
* **Cartes/Conteneurs :** (Description de la rondeur des coins, couleur de fond, profondeur d'ombre).
* **Champs/Formulaires :** (Style de bordure, fond).

## 5. Principes de Mise en Page
(Description de la stratégie des espaces blancs, des marges et de l'alignement de la grille.)

Exemple d'Utilisation

Pour utiliser cette compétence pour le projet Collection de Meubles :

  1. Récupérer les informations du projet :

    Utilisez le serveur MCP Stitch pour obtenir le projet Collection de Meubles

  2. Obtenir les détails de l'écran de la page d'accueil :

    Récupérez le code, l'image et les informations de l'objet écran de la page d'accueil

  3. Référencer les bonnes pratiques :

    Consultez le Guide de Prompting Efficace Stitch à l'adresse :
https://stitch.withgoogle.com/docs/learn/prompting/

  4. Analyser et synthétiser :

    • Extrayez tous les tokens de design pertinents de l'écran
    • Traduisez les valeurs techniques en langage descriptif
    • Organisez les informations selon la structure DESIGN.md

  5. Générer le fichier :

    • Créez DESIGN.md dans le répertoire du projet
    • Suivez exactement le format prescrit
    • Assurez-vous que tous les codes de couleur sont exacts
    • Utilisez un langage évocateur et adapté aux designers

Bonnes Pratiques

  • Soyez Descriptif·ve : Évitez les termes génériques comme "bleu" ou "arrondi". Utilisez "Céruléen profond comme un océan (#0077B6)" ou "Bords doucement incurvés"
  • Soyez Fonctionnel·le : Expliquez toujours à quoi sert chaque élément de design
  • Soyez Cohérent·e : Utilisez la même terminologie tout au long du document
  • Soyez Visuel·le : Aidez les lecteurs à visualiser le design à travers vos descriptions
  • Soyez Précis·e : Incluez les valeurs exactes (codes hexadécimaux, valeurs en pixels) entre parenthèses après les descriptions en langage naturel

Conseils pour Réussir

  1. Commencez par la vue d'ensemble : Comprenez l'esthétique globale avant de plonger dans les détails
  2. Cherchez des motifs : Identifiez les motifs cohérents d'espacement, de taille et de style
  3. Pensez sémantiquement : Nommez les couleurs selon leur fonction, pas seulement leur apparence
  4. Considérez la hiérarchie : Documentez comment le poids visuel et l'importance sont communiqués
  5. Référencez le guide : Utilisez le langage et les motifs du Guide de Prompting Efficace Stitch

Pièges Courants à Éviter

  • ❌ Utiliser un jargon technique sans traduction (par ex., "rounded-xl" au lieu de "coins généreusement arrondis")
  • ❌ Omettre les codes de couleur ou utiliser uniquement des noms descriptifs
  • ❌ Oublier d'expliquer les rôles fonctionnels des éléments de design
  • ❌ Être trop vague dans les descriptions de l'atmosphère
  • ❌ Ignorer les détails subtils du design comme les ombres ou les motifs d'espacement

Individual skills in this repo

This repo contains 3 individual skills — each has its own dedicated page.

beavon2010/claude-skills

>- Convert frontend code (Vite, React, Angular, Vue, etc.) to a Stitch Design by chaining static HTML extraction, design system extraction, and file upload. **ALWAYS** use this skill when the user's intent is to move existing web apps or React/Angular/Vue components into Stitch (e.g., requests to "save", "migrate", or "upload"). You must use this skill even for simple "save" operations, as it is the only way to ensure the design system is extracted and assets are properly linked.

beavon2010/claude-skills

Transforms vague UI ideas into polished, Stitch-optimized prompts. Enhances specificity, adds UI/UX keywords, injects design system context, and structures output for better generation results.

beavon2010/claude-skills

>- Extract a comprehensive design system (DESIGN.md) directly from frontend source code — React, Vue, Svelte, Angular, plain HTML/CSS, or any web framework. Analyzes component files, stylesheets, Tailwind configs, theme definitions, and design tokens to produce a rich, Stitch-compatible design system document. Use this skill whenever the user wants to reverse-engineer a design system from an existing codebase, audit the visual language of a project, extract design tokens from source files, or understand the styling patterns in a frontend repo — even if they just say "what does this app look like?" or "pull out the design from this code.

Skills associés

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community