Was macht design-system-skill?
Claude Code Skill: Erstelle design.md, design-guidelines.md und design-components.md aus beliebigen Design-Referenzen – Bildern, PDFs, Links, Screenshots. Für KI-gestütztes Coding (Cursor, Claude Code, Copilot).
Überblick
Dieses Skill hilft Entwicklern und Designern, aus vorhandenem Designmaterial automatisch eine strukturierte Dokumentation zu generieren. Es unterstützt die Formate:
- Bilder – Screenshots, Mockups, Wireframes
- PDFs – Styleguides, Design-Spezifikationen
- Links – Online-Designsysteme, Figma-Prototypen
- Screenshots – Screenshots von Apps oder Webseiten
Ausgabe
Das Skill erzeugt drei Markdown-Dateien:
| Datei | Inhalt |
|---|---|
design.md | Übergeordnetes Designsystem (Farben, Typografie, Abstände) |
design-guidelines.md | Spezifische Designrichtlinien (z. B. Barrierefreiheit, Responsivität) |
design-components.md | Wiederverwendbare UI-Komponenten mit Props, Varianten und Beispielen |
Verwendung
Voraussetzungen
- Claude Code, Cursor oder GitHub Copilot
- Zugriff auf die Design-Referenzdateien
Befehl
# Für Claude Code
claude design-system-skill <referenz>
Ersetze <referenz> durch:
- Einen Dateipfad zu einem Bild/PDF
- Eine URL zu einem Online-Designsystem
- Einen lokalen Screenshot
Beispiele
claude design-system-skill ./designs/figma-screenshot.png
cat ./designs/styleguide.pdf | claude design-system-skill -
claude design-system-skill https://material.io/design
Integration
Füge das Skill zu deiner claude.json Konfigurationsdatei hinzu:
{
"skills": [
{
"name": "albertzhangz10/design-system-skill"
}
]
}
Lizenz
MIT