Compétences design-md
🎨

design-md

Sûr

Créer une documentation de conception sémantique

Les systèmes de conception sont souvent bloqués dans des valeurs CSS techniques difficiles à traduire en invites. Cette compétence analyse les éléments visuels et les traduit en documentation de conception en langage naturel qui garantit une génération d'interface utilisateur cohérente.

Prend en charge: Claude Codex Code(CC)
⚠️ 64 Médiocre
1

Télécharger le ZIP du skill

2

Importer dans Claude

Allez dans Paramètres → Capacités → Skills → Importer un skill

3

Activez et commencez à utiliser

Tester

Utilisation de "design-md". Analyze the Furniture Collection project and generate a DESIGN.md file from the Home screen.

Résultat attendu:

  • # Design System: Furniture Collections List
  • **Project ID:** 13534454087919359824
  • ## 1. Visual Theme & Atmosphere
  • The Furniture Collections List embodies a sophisticated, minimalist sanctuary that marries the pristine simplicity of Scandinavian design with the refined visual language of luxury editorial presentation...
  • ## 2. Color Palette & Roles
  • ### Primary Foundation
  • - **Warm Barely-There Cream** (#FCFAFA) – Primary background color...
  • ### Accent & Interactive
  • - **Deep Muted Teal-Navy** (#294056) – The sole vibrant accent in the palette...

Audit de sécurité

Sûr
v1 • 1/29/2026

All static findings are false positives. The scanner incorrectly flagged hex color codes as weak cryptographic algorithms, markdown backticks as shell execution, and Stitch MCP tool names as C2 keywords. This is documentation-only content that generates design system files using authorized API calls.

3
Fichiers analysés
363
Lignes analysées
4
résultats
1
Total des audits

Problèmes à risque élevé (3)

examples/DESIGN.md:1-155SKILL.md:21-173README.md:1-35
False Positive: Hex Color Codes Flagged as Cryptographic Patterns
Scanner flagged hex color codes (e.g., #294056, #FCFAFA) as weak cryptographic algorithms. These are legitimate design tokens in documentation.
README.md:5-24SKILL.md:13-173examples/DESIGN.md:68
False Positive: Markdown Backticks Flagged as Shell Execution
Scanner flagged markdown code block syntax (backticks) as Ruby/shell backtick execution. Markdown backticks are formatting syntax, not code execution.
SKILL.md:33-62
False Positive: Stitch MCP Tool Names Flagged as C2 Keywords
Scanner flagged legitimate Stitch MCP tool names (list_projects, get_screen, list_screens) as C2 command-and-control keywords.
Problèmes à risque moyen (1)
SKILL.md:23SKILL.md:136
False Positive: Standard Documentation URLs Flagged
Scanner flagged the official Stitch documentation URL as a hardcoded network endpoint.
Audité par: claude

Score de qualité

38
Architecture
100
Maintenabilité
83
Contenu
31
Communauté
70
Sécurité
83
Conformité aux spécifications

Ce que vous pouvez construire

Créer un langage de conception cohérent pour un nouveau projet Stitch

Générez un DESIGN.md complet qui sert de source de vérité pour inciter Stitch à créer de nouveaux écrans qui correspondent à votre langage de conception existant.

Documenter les modèles de conception existants pour la collaboration en équipe

Analysez les écrans terminés et produisez une documentation de conception lisible par l'aide les membres de l'équipe à comprendre et à étendre le système de conception.

Créer une documentation de référence pour l'itération de conception assistée par IA

Construisez un guide de conception sémantique qui permet des invites précises pour des améliorations incrémentielles des écrans existants tout en maintenant la cohérence de la conception.

Essayez ces prompts

Documentation de conception de base 
Analysez le projet [Nom du projet] et générez un fichier DESIGN.md documentant le système de conception à partir de l'écran d'accueil.
Analyse d'écran spécifique 
Récupérez l'écran [Nom de l'écran] du projet [Nom du projet]. Analysez la conception visuelle et créez un DESIGN.md complet couvrant la palette de couleurs, la typographie, les styles de composants et les principes de mise en page.
Extraction des jetons de conception 
Extrayez tous les jetons de conception du projet [Nom du projet] incluant les couleurs, les valeurs d'espacement, les modèles de rayon de bordure et les styles d'ombres. Générez des descriptions sémantiques pour chaque jeton avec des rôles fonctionnels.
Synthèse de conception multi-écrans 
Analysez plusieurs écrans du projet [Nom du projet] pour identifier les modèles de conception cohérents. Synthétisez un DESIGN.md unifié qui capture le langage de conception principal tout en documentant les variations spécifiques aux composants.

Bonnes pratiques

  • Utilisez des noms de couleurs sémantiques qui transmettent le caractère et le but (par exemple, 'Bleu marine au thé vert sourdde profonde' plutôt que juste 'Bleu foncé')
  • Incluez toujours les noms descriptifs et les codes hexadécimaux des couleurs pour permettre une invite IA précise
  • Documentez les rôles fonctionnels pour chaque élément de conception pour guider une utilisation cohérente à travers les écrans

Éviter

  • Utiliser des noms de classes CSS techniques sans traduction (par exemple, 'rounded-xl' au lieu de 'coins généreusement arrondis')
  • Omettre les codes de couleur et s'appuyer uniquement sur des noms descriptifs
  • Ne pas expliquer le but fonctionnel des éléments de conception

Foire aux questions

Qu'est-ce que DESIGN.md et pourquoi en ai-je besoin ?
DESIGN.md sert de source de vérité pour inciter Stitch à générer de nouveaux écrans. Il traduit les valeurs de conception techniques en langage naturel que Stitch interprète pour une création d'interface utilisateur cohérente.
De quels accès ai-je besoin pour utiliser cette compétence ?
Vous avez besoin d'accéder au serveur Stitch MCP et à un projet Stitch avec au moins un écran conçu à analyser.
Quels formats cette compétence prend-elle en charge ?
Cette compétence fonctionne avec les conceptions basées sur HTML, CSS et Tailwind. Elle extrait les classes Tailwind et le CSS personnalisé pour créer des jetons de conception.
Combien de temps dure la documentation ?
La compétence termine généralement l'analyse et la documentation en moins de 2 minutes selon la complexité de l'écran.
Puis-je mettre à jour DESIGN.md à mesure que mon projet évolue ?
Oui. Réexécutez la compétence sur les écrans mis à jour pour générer une documentation révisée qui reflète les modifications de conception.
qu'est-ce qui fait une bonne documentation de conception sémantique ?
Une bonne documentation utilise des descriptions évocatrices et lisibles par l'homme pour tous les éléments de conception et inclut toujours le contexte fonctionnel pour chaque composant.

Détails du développeur

Licence

MIT

Dépôt

https://github.com/google-labs-code/stitch-skills/tree/main/skills/design-md/

Réf

main

Structure de fichiers

📁 examples/

📄 DESIGN.md

📄 README.md

📄 SKILL.md