Fähigkeiten design-md
🎨

design-md

Sicher

Semantisches Design-Dokumentation erstellen

Designsysteme geraten oft in technische CSS-Werte, die schwer in Prompts übersetzt werden können. Diese Fähigkeit analysiert visuelle Assets und übersetzt sie in natürlichsprachiges Design-Dokumentation, die eine konsistente UI-Generierung sicherstellt.

Unterstützt: Claude Codex Code(CC)
⚠️ 64 Schlecht
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". Analysieren Sie das Furniture Collection Projekt und erstellen Sie eine DESIGN.md-Datei vom Startbildschirm aus.

Erwartetes Ergebnis:

  • # Design System: Furniture Collections List
  • **Project ID:** 13534454087919359824
  • ## 1. Visuelles Thema & Atmosphäre
  • Die Furniture Collections List verkörpert eine feine, minimalistische Oase, die die makellose Einfachheit des skandinavischen Designs mit der verfeinerten visuellen Sprache der luxuriösen redaktionellen Präsentation verbindet...
  • ## 2. Farbpalette & Rollen
  • ### Primäre Grundlage
  • - **Warm Minimal Cream** (#FCFAFA) – Primärer Hintergrundfarbwert...
  • ### Akzent & Interaktiv
  • - **Tiefes Dämpftes Teal-Navy** (#294056) – Die einzige farbige Akzentfarbe in der Palette...

Sicherheitsaudit

Sicher
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
Gescannte Dateien
363
Analysierte Zeilen
4
befunde
1
Gesamtzahl Audits

Probleme mit hohem Risiko (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.
Probleme mit mittlerem Risiko (1)
SKILL.md:23SKILL.md:136
False Positive: Standard Documentation URLs Flagged
Scanner flagged the official Stitch documentation URL as a hardcoded network endpoint.
Auditiert von: claude

Qualitätsbewertung

38
Architektur
100
Wartbarkeit
83
Inhalt
31
Community
70
Sicherheit
83
Spezifikationskonformität

Was du bauen kannst

Konsistentes Designsprach für ein neues Stitch-Projekt erstellen

Erstellen Sie eine umfassende DESIGN.md, die als Single Source of Truth für das Generieren neuer Bildschirme dient, die Ihr bestehendes Designsprach widerspiegeln.

Bestehende Designmuster für die Teamzusammenarbeit dokumentieren

Analysieren Sie fertiggestellte Bildschirme und erstellen Sie menschenlesbare Design-Dokumentation, die Teammitgliedern hilft, das Designsystem zu verstehen und zu erweitern.

Referenzdokumentation für die KI-gestützte Designiteration erstellen

Erstellen Sie einen semantischen Designleitfaden, der präzise Prompts für iterative Verbesserungen an bestehenden Bildschirmen ermöglicht, während die Designkonsistenz gewahrt bleibt.

Probiere diese Prompts

Grundlegende Design-Dokumentation 
Analysieren Sie das Projekt [Project Name] und erstellen Sie eine DESIGN.md-Datei, die das Designsystem vom Startbildschirm dokumentiert.
Analyse eines spezifischen Bildschirms 
Rufen Sie den Bildschirm [Screen Name] aus dem Projekt [Project Name] ab. Analysieren Sie das visuelle Design und erstellen Sie eine umfassende DESIGN.md, die Farbpalette, Typografie, Komponentenstile und Layoutprinzipien abdeckt.
Extraktion von Design-Tokens 
Extrahieren Sie alle Design-Tokens aus dem Projekt [Project Name], einschließlich Farben, Abstandswerte, Randradius-Muster und Schattenstile. Generieren Sie semantische Beschreibungen für jedes Token mit funktionalen Rollen.
Synthese mehrerer Bildschirm-Designs 
Analysieren Sie mehrere Bildschirme aus dem Projekt [Project Name], um konsistente Designmuster zu identifizieren. Synthetisieren Sie eine einheitliche DESIGN.md, die das Kerndesignsprach einfängt, während Komponenten-spezifische Variationen dokumentiert werden.

Bewährte Verfahren

  • Verwenden Sie semantische Farbnamen, die Charakter und Zweck ausdrücken (z. B. 'Tiefes Dämpftes Teal-Navy' anstelle von nur 'Dunkelblau')
  • Schließen Sie immer sowohl beschreibende Namen als auch Hex-Codes für Farben ein, um präzise AI-Prompts zu ermöglichen
  • Dokumentieren Sie funktionale Rollen für jedes Designelement, um eine konsistente Verwendung über Bildschirme hinweg zu gewährleisten

Vermeiden

  • Verwenden von technischen CSS-Klassennamen ohne Übersetzung (z. B. 'rounded-xl' anstelle von 'wirklich abgerundete Ecken')
  • Auslassen von Farbcode-Referenzen und alleiniger Verlass auf beschreibende Namen
  • Fehlende Erklärung des funktionalen Zwecks von Designelementen

Häufig gestellte Fragen

Was ist DESIGN.md und warum brauche ich es?
DESIGN.md fungiert als Single Source of Truth für das Generieren neuer Bildschirme durch Stitch. Es übersetzt technische Designwerte in natürlichsprachliche Beschreibungen, die Stitch interpretiert, um eine konsistente UI-Erstellung zu gewährleisten.
Welchen Zugriff benötige ich, um diese Fähigkeit zu nutzen?
Sie benötigen Zugriff auf den Stitch MCP Server und ein Stitch-Projekt mit mindestens einem entworfenen Bildschirm zur Analyse.
Welche Formate unterstützt diese Fähigkeit?
Diese Fähigkeit funktioniert mit HTML, CSS und Tailwind-basierten Designs. Sie extrahiert Tailwind-Klassen und benutzerdefiniertes CSS, um Design-Tokens zu erstellen.
Wie lange dauert die Dokumentation?
Die Fähigkeit abgeschlossen die Analyse und Dokumentation normalerweise in unter 2 Minuten, abhängig von der Komplexität des Bildschirms.
Kann ich DESIGN.md aktualisieren, während sich mein Projekt weiterentwickelt?
Ja. Führen Sie die Fähigkeit bei aktualisierten Bildschirmen erneut aus, um überarbeitete Dokumentation zu generieren, die Designänderungen widerspiegelt.
Was macht gute semantische Design-Dokumentation aus?
Gute Dokumentation verwendet ausdrückliche, menschenlesbare Beschreibungen für alle Designelemente und beinhaltet immer funktionalen Kontext für jede Komponente.

Entwicklerdetails

Lizenz

MIT

Repository

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

Ref

main

Dateistruktur

📁 examples/

📄 DESIGN.md

📄 README.md

📄 SKILL.md