Fähigkeiten design-md
🎨

design-md

Sicher

DESIGN.md für Stitch-Projekte generieren

Auch verfügbar von: google-labs-code

Diese Fähigkeit analysiert Stitch-Projekte und generiert automatisch semantische Design-Dokumentation, die als zentrale Quelle für konsistente UI-Entwicklung dient.

Unterstützt: Claude Codex Code(CC)
🥉 73 Bronze
1

Die Skill-ZIP herunterladen

2

In Claude hochladen

Gehe zu Einstellungen → Fähigkeiten → Skills → Skill hochladen

3

Einschalten und loslegen

Teste es

Verwendung von "design-md". Verwende design-md-Fähigkeit auf Furniture Collection-Projekt

Erwartetes Ergebnis:

Design-System: Furniture Collection

## 1. Visuelles Theme & Atmosphäre
Warm, einladend und minimalistisch mit organischem Gefühl. Das Design balanciert sauberen Weißraum mit natürlichen Elementen.

## 2. Farbpalette & Rollen
- Warm Sand (#F5E6D3): Primärer Hintergrund für Karten
- Forest Deep (#2D4739): Primäre Aktionen und Überschriften
- Soft Cream (#FAF8F5): Seiten-Hintergrund

## 3. Typografie-Regeln
- Überschriften: Sans-serif, semi-bold, großzügiger Buchstabenabstand
- Fließtext: Sans-serif, reguläre Stärke, komfortable Zeilenhöhe

Verwendung von "design-md". Generiere DESIGN.md für Mobile App-Projekt

Erwartetes Ergebnis:

Design-System: Mobile App

## 1. Visuelles Theme & Atmosphäre
Schlicht, modern und funktional. Hoher Kontrast für Barrierefreiheit mit subtiler Tiefe durch Erhöhung.

## 2. Farbpalette & Rollen
- Midnight Blue (#1A237E): Primäre Markenfarbe
- Electric Teal (#00BFA5): Akzent für CTAs
- Pure White (#FFFFFF): Saubere Hintergründe

## 4. Komponenten-Gestaltungen
- Buttons: Pillenförmig, gefüllt mit primärer Farbe, subtiler Schatten beim Hover
- Karten: Rounded-lg Ecken, weißer Hintergrund, hauchzarter Schatten

Sicherheitsaudit

Sicher
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
Gescannte Dateien
179
Analysierte Zeilen
0
befunde
1
Gesamtzahl Audits
Keine Sicherheitsprobleme gefunden
Auditiert von: claude

Qualitätsbewertung

38
Architektur
100
Wartbarkeit
87
Inhalt
50
Community
100
Sicherheit
83
Spezifikationskonformität

Was du bauen kannst

Design-System-Dokumentation

Erstellt umfassende Design-Dokumentation für bestehende Stitch-Projekte zur Aufrechterhaltung der Konsistenz über Teammitglieder hinweg

Onboarding-Dokumentation

Generiert klare Design-Referenzdokumente für neue Teammitglieder, die einem Stitch-basierten Projekt beitreten

Vorbereitung der Design-Übergabe

Erstellt detaillierte Design-Spezifikationen vor der Übergabe an Entwickler zur Implementierung

Probiere diese Prompts

Basis-Design-Dokumentation 
Verwende die design-md-Fähigkeit, um das Stitch-Projekt zu analysieren und eine DESIGN.md-Datei zu generieren, die die Farbpalette, Typografie und Komponentenstile dokumentiert.
Komplettes Design-System 
Analysiere das [PROJECT_NAME] Stitch-Projekt mit der design-md-Fähigkeit. Extrahiere alle Design-Tokens, dokumentiere die Atmosphäre und das visuelle Theme und erstelle ein umfassendes DESIGN.md.
Komponenten-Fokus 
Verwende die design-md-Fähigkeit, um das Stitch-Projekt zu analysieren und konzentriere dich auf die Dokumentation der Button-, Card- und Input-Komponentenstile. Generiere die relevanten Abschnitte für DESIGN.md.
Design-Token-Export 
Wende die design-md-Fähigkeit an, um alle Farbwerte, Typografie-Einstellungen und Abstands-Tokens aus dem Stitch-Projekt zu extrahieren. Gib sie im DESIGN.md-Format mit semantischen Namen aus.

Bewährte Verfahren

  • Verwende beschreibende, ausdrucksstarke Namen für Farben statt generischer Begriffe wie 'blau' oder 'grün'
  • Füge in der Dokumentation immer die funktionale Rolle jedes Design-Elements hinzu
  • Beziehe dich auf den Stitch Effective Prompting Guide für konsistente Terminologie

Vermeiden

  • Verwendung technischer Klassennamen ohne Übersetzung in beschreibende Sprache
  • Weglassen von Hex-Codes und ausschließliche Verwendung beschreibender Namen
  • Nicht-Dokumentation des 'Warum' hinter Design-Entscheidungen

Häufig gestellte Fragen

Was ist Stitch?
Stitch ist ein Design-Tool, mit dem du UI erstellen kannst, indem du beschreibst, was du möchtest. Es verwendet Visuelle Beschreibungen, die durch spezifische Farbwerte unterstützt werden, um Designs zu interpretieren.
Benötige ich Programmiererfahrung, um diese Fähigkeit zu verwenden?
Nein, diese Fähigkeit analysiert bestehende Stitch-Projekte und generiert Dokumentation. Du benötigst Zugriff auf ein Stitch-Projekt mit gestalteten Screens.
Kann diese Fähigkeit neue Designs erstellen?
Nein, diese Fähigkeit dokumentiert bestehende Designs. Sie generiert keine neue UI. Verwende Stitch direkt zum Erstellen neuer Designs.
Welches Format verwendet die Ausgabe?
Die Ausgabe ist eine DESIGN.md-Datei im Markdown-Format mit Abschnitten für visuelles Theme, Farbpalette, Typografie, Komponenten und Layout-Prinzipien.
Funktioniert diese Fähigkeit mit jedem Design-Tool?
Nein, diese Funktion funktioniert speziell mit Stitch-Projekten. Sie benötigt Zugriff auf den Stitch MCP Server zum Abrufen von Projektdaten.
Wie detailliert ist die generierte Dokumentation?
Die Dokumentation enthält Farbcodes mit semantischen Namen, Typografie-Regeln, Komponenten-Gestaltungsdetails und Layout-Prinzipien. Der Detaillierungsgrad hängt vom Reichtum des Quellprojekts ab.

Entwicklerdetails

Autor

sickn33

Lizenz

MIT

Repository

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

Ref

main

Dateistruktur

📄 SKILL.md