Compétences design-md
🎨

design-md

Sûr

Générer DESIGN.md pour les projets Stitch

Également disponible depuis: google-labs-code

Cette skill analyse les projets Stitch et génère automatiquement une documentation de conception sémantique qui sert de référence pour un développement UI cohérent.

Prend en charge: Claude Codex Code(CC)
🥉 73 Bronze
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". Use design-md skill on Furniture Collection project

Résultat attendu:

Design System: Furniture Collection

## 1. Visual Theme & Atmosphere
Warm, inviting, and minimalist with an organic feel. The design balances clean whitespace with natural elements.

## 2. Color Palette & Roles
- Warm Sand (#F5E6D3): Primary background for cards
- Forest Deep (#2D4739): Primary actions and headers
- Soft Cream (#FAF8F5): Page background

## 3. Typography Rules
- Headings: Sans-serif, semi-bold, generous letter-spacing
- Body: Sans-serif, regular weight, comfortable line-height

Utilisation de "design-md". Generate DESIGN.md for Mobile App project

Résultat attendu:

Design System: Mobile App

## 1. Visual Theme & Atmosphere
sleek, modern, and functional. High contrast for accessibility with subtle depth through elevation.

## 2. Color Palette & Roles
- Midnight Blue (#1A237E): Primary brand color
- Electric Teal (#00BFA5): Accent for CTAs
- Pure White (#FFFFFF): Clean backgrounds

## 4. Component Stylings
- Buttons: Pill-shaped, filled primary color, subtle shadow on hover
- Cards: Rounded-lg corners, white background, whisper-soft shadow

Audit de sécurité

Sûr
v1 • 2/24/2026

All static findings are false positives. The skill is a legitimate design documentation generator. Backticks detected are markdown code formatting, not shell execution. URLs are documentation references, not network exfiltration. The skill uses MCP tools to read project data and generate design documentation.

1
Fichiers analysés
179
Lignes analysées
0
résultats
1
Total des audits
Aucun problème de sécurité trouvé
Audité par: claude

Score de qualité

38
Architecture
100
Maintenabilité
87
Contenu
50
Communauté
100
Sécurité
83
Conformité aux spécifications

Ce que vous pouvez construire

Documentation du système de conception

Créer une documentation de conception complète pour les projets Stitch existants afin de maintenir la cohérence entre les membres de l'équipe

Documentation d'intégration

Générer des documents de référence de conception clairs pour les nouveaux membres de l'équipe rejoignant un projet basé sur Stitch

Préparation du transfert de conception

Préparer des spécifications de conception détaillées avant de les transmettre aux développeurs pour l'implémentation

Essayez ces prompts

Documentation de conception de base 
Use the design-md skill to analyze the Stitch project and generate a DESIGN.md file that documents the color palette, typography, and component styles.
Système de conception complet 
Analyze the [PROJECT_NAME] Stitch project using the design-md skill. Extract all design tokens, document the atmospheres and visual theme, and create a comprehensive DESIGN.md.
Focus sur les composants 
Use the design-md skill to analyze the Stitch project and focus on documenting the button, card, and input component styles. Generate the relevant sections for DESIGN.md.
Export des jetons de conception 
Apply the design-md skill to extract all color values, typography settings, and spacing tokens from the Stitch project. Output them in DESIGN.md format with semantic names.

Bonnes pratiques

  • Utiliser des noms évocateurs et descriptifs pour les couleurs plutôt que des termes génériques comme 'bleu' ou 'vert'
  • Toujours inclure le rôle fonctionnel de chaque élément de conception dans la documentation
  • Référencez le Stitch Effective Prompting Guide pour une terminologie cohérente

Éviter

  • Utiliser des noms de classes techniques sans les traduire en langage descriptif
  • Omettre les codes hexadécimaux et se fier uniquement aux noms descriptifs
  • Ne pas documenter le 'pourquoi' derrière les décisions de conception

Foire aux questions

Qu'est-ce que Stitch ?
Stitch est un outil de conception qui vous permet de créer une UI en décrivant ce que vous voulez. Il utilise des Descriptions Visuelles soutenues par des valeurs de couleurs spécifiques pour interpréter les conceptions.
Ai-je besoin d'expérience en codage pour utiliser cette skill ?
Non, cette skill analyse les projets Stitch existants et génère de la documentation. Vous devez avoir accès à un projet Stitch avec des écrans conçus.
Cette skill peut-elle créer de nouvelles conceptions ?
Non, cette skill documente les conceptions existantes. Elle ne génère pas de nouvelle UI. Utilisez Stitch directement pour créer de nouvelles conceptions.
Quel format la sortie utilise-t-elle ?
La sortie est un fichier DESIGN.md au format Markdown avec des sections pour le thème visuel, la palette de couleurs, la typographie, les composants et les principes de mise en page.
Cette skill fonctionne-t-elle avec n'importe quel outil de conception ?
Non, cette skill fonctionne spécifiquement avec les projets Stitch. Elle nécessite un accès au serveur Stitch MCP pour récupérer les données du projet.
Quelle est le niveau de détail de la documentation générée ?
La documentation inclut des codes couleurs avec des noms sémantiques, des règles de typographie, des détails de style de composants et des principes de mise en page. Le niveau de détail dépend de la richesse du projet source.

Détails du développeur

Auteur

sickn33

Licence

MIT

Dépôt

https://github.com/sickn33/antigravity-awesome-skills/tree/main/web-app/public/skills/design-md

Réf

main

Structure de fichiers

📄 SKILL.md