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.
Die Skill-ZIP herunterladen
In Claude hochladen
Gehe zu Einstellungen → Fähigkeiten → Skills → Skill hochladen
Einschalten und loslegen
Teste es
Verwendung von "design-md". Analyze the Furniture Collection project and generate a DESIGN.md file from the Home screen.
Erwartetes Ergebnis:
- # 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...
Sicherheitsaudit
SicherAll 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.
Probleme mit hohem Risiko (3)
Probleme mit mittlerem Risiko (1)
Qualitätsbewertung
Was du bauen kannst
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.
Probiere diese Prompts
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.
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.
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.
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.
Bewährte Verfahren
- 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
Vermeiden
- 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