Esta skill analisa projetos Stitch e gera automaticamente documentação de design semântica que serve como fonte de verdade para desenvolvimento consistente de UI.
Télécharger le ZIP du skill
Importer dans Claude
Allez dans Paramètres → Capacités → Skills → Importer un skill
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ûrAll 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.
Score de qualité
Ce que vous pouvez construire
Documentação de Design System
Criar documentação de design abrangente para projetos Stitch existentes para manter consistência entre os membros da equipe
Documentação de Integração
Gerar documentos de referência de design claros para novos membros da equipe que ingressam em um projeto baseado em Stitch
Preparação de Entrega de Design
Preparar especificações de design detalhadas antes de entregar aos desenvolvedores para implementação
Essayez ces prompts
Use a skill design-md para analisar o projeto Stitch e gerar um arquivo DESIGN.md que documenta a paleta de cores, tipografia e estilos de componentes.
Analise o projeto Stitch [PROJECT_NAME] usando a skill design-md. Extraia todos os tokens de design, documente a atmosfera e o tema visual e crie um DESIGN.md completo.
Use a skill design-md para analisar o projeto Stitch e focar na documentação dos estilos dos componentes de botão, card e input. Gere as seções relevantes para o DESIGN.md.
Aplique a skill design-md para extrair todos os valores de cores, configurações de tipografia e tokens de espaçamento do projeto Stitch. Envie-os em formato DESIGN.md com nomes semânticos.
Bonnes pratiques
- Use nomes descritivos e evocativos para cores em vez de termos genéricos como 'azul' ou 'verde'
- Sempre inclua o papel funcional de cada elemento de design na documentação
- Consulte o Guia de Prompting Efetivo do Stitch para terminologia consistente
Éviter
- Usar nomes de classes técnicas sem traduzir para linguagem descritiva
- Omitir códigos hex e confiar apenas em nomes descritivos
- Deixar de documentar o 'porquê' atrás das decisões de design
Foire aux questions
O que é Stitch?
Preciso de experiência em codificação para usar esta skill?
Esta skill pode criar novos designs?
Que formato a saída usa?
Esta skill funciona com qualquer ferramenta de design?
Quão detalhada é a documentação gerada?
Détails du développeur
Auteur
sickn33Licence
MIT
Dépôt
https://github.com/sickn33/antigravity-awesome-skills/tree/main/web-app/public/skills/design-mdRéf
main
Structure de fichiers
📄 SKILL.md