Was macht website-design-systems-mcp?
🎨 Extrahiere vollständige Designsysteme von Websites und generiere KI-bereite skill.md-Dateien, um exakte Designelemente effizient zu reproduzieren.
Funktionen
- Farbpalette extrahieren – Primär-, Sekundär-, Akzent- und Neutrale Farben
- Typografie erfassen – Schriftfamilien, -größen, -gewichte und Zeilenabstände
- Abstands- und Größensystem – Ränder, Innenabstände, Abstände und Container-Breiten
- Schatten und Effekte – Box-Schatten, Text-Schatten und Übergangseigenschaften
- UI-Grundelemente – Schaltflächen, Eingabefelder, Buttons und Navigationskomponenten
- KI-bereite Ausgabe – Strukturierte SKILL.md-Datei mit YAML-Frontmatter
Unterstützte Plattformen
- Claude Code
- Cursor
- Codex
- Jeder andere MCP-kompatible KI-Assistent
Verwendung
- Gib eine Ziel-URL oder HTML-Inhalt ein:
bobitenta mcp --url https://example.com
-
Der Skill durchsucht die Seite und sammelt relevante Design-Token.
-
Die Ausgabe ist eine vollständige
SKILL.md-Datei, die du in dein Projekt kopieren kannst.
Beispielausgabe (Auszug)
name: example-design-system
colors:
primary: "#1a73e8"
secondary: "#34a853"
background: "#ffffff"
text: "#202124"
typography:
font-family: "Google Sans, Arial, sans-serif"
font-sizes:
h1: 32px
h2: 24px
body: 16px
Lizenz
MIT