Was macht website-design-systems-mcp?
Extrahiere vollständige Designsysteme von jeder Website und generiere KI-bereite skill.md-Dateien.
Überblick
Dieses Tool scannt eine beliebige Website, identifiziert die zugrunde liegenden Designmuster und generiert eine strukturierte skill.md-Datei, die als Referenz für KI-gestützte Entwicklungsumgebungen dient.
Funktionen
- Farbpaletten: Extrahiert Primär-, Sekundär-, Akzent- und Hintergrundfarben.
- Typografie: Erfasst Schriftarten, Schriftgrößen, Zeilenhöhen und Schriftgewichte.
- Abstände: Identifiziert Abstandsmaße (margin, padding) und Rasterabstände.
- Komponentenstile: Dokumentiert wiederverwendbare UI-Komponenten und deren Stile.
- Layout-Muster: Erkennt flexible Boxen, Raster, und andere Layout-Techniken.
Verwendung
- Gib die URL der Zielwebsite an.
- Das Skill durchsucht die Seite und extrahiert die Stilinformationen.
- Die generierte
skill.md-Datei kann direkt in unterstützten KI-Plattformen verwendet werden.
Plattformen
- Claude Code
- Cursor
- Codex
- Andere KI-gestützte Entwicklungsumgebungen
Beispiel
# Angenommen, das Skill wird über ein Tool wie `npx` aufgerufen:
npx kargatharaakash/website-design-systems-mcp https://example.com
Hinweise
- Stelle sicher, dass die Website öffentlich zugänglich ist.
- Dynamisch generierte Stile (via JavaScript) werden möglicherweise nicht vollständig erfasst.