Communitygithub.com

arvindrk/extract-design-system

Entwerfe Design-Grundlagen von einer öffentlichen Website und generiere Start-Token-Dateien für dein Projekt.

Was ist extract-design-system?

Diese Fähigkeit ermöglicht es AI-Agenten, die visuellen Design-Eigenschaften einer öffentlich zugänglichen Website zu analysieren und daraus ein strukturiertes Design-Token-System abzuleiten. Sie ist besonders nützlich für Entwickler:innen und Designer:innen, die ein existierendes Design-System verstehen, reverse-engineeren oder als Grundlage für ein neues Projekt nutzen möchten. Die Fähigkeit unterstützt gängige Plattformen wie Claude Code und andere Code-orientierte AI-Assistenten. Sie funktioniert, indem sie die Website analysiert, häufig über HTTP-Anfragen und DOM-Inspektion, und die extrahierten Farben, Typografie, Abstände und andere Design-Primitiven in gängige Token-Formate wie JSON, YAML oder CSS-Variablen ausgibt. Der generierte Start-Token-Satz kann dann einfach in das Design-System des eigenen Projekts importiert oder weiterverarbeitet werden.

Funktioniert mit~Claude Code~Codex CLI~Cursor
Part ofDesign & UI
npx skills add https://github.com/arvindrk/extract-design-system/tree/main/skills/extract-design-system
Original anzeigen→Alle Skills durchsuchen

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Dokumentation

Was macht extract-design-system?

Extrahiere Design-Grundlagen von einer öffentlichen Website und generiere Start-Token-Dateien für dein Projekt.

Beschreibung

Diese Fähigkeit ruft die visuellen Gestaltungseigenschaften einer öffentlichen Website ab (Farben, Typografie, Abstände etc.) und fasst sie in Token-Dateien zusammen, die als Grundlage für dein eigenes Design-System dienen.

Verwendung

  1. Gib die URL der öffentlichen Website an.
  2. Die Fähigkeit ruft die Seite ab und analysiert die CSS-Regeln, berechneten Stile und andere relevante Design-Informationen.
  3. Es wird ein Satz von Design-Token-Dateien generiert (z. B. tokens.json oder tokens.yml).
  4. Diese Tokens können in dein Projekt integriert werden, um konsistente Designentscheidungen zu treffen.

Beispiel

# Angenommen, du möchtest das Design-System von example.com extrahieren
# Verwende den Skill in deinem AI-Agenten:
./extract-design-system https://www.example.com

Unterstützte Formate

  • JSON (Standard)
  • YAML
  • CSS-Variablen (optional)

Kompatibilität

  • Claude Code
  • Cursor
  • Codex CLI
  • Andere Code-orientierte AI-Assistenten

Einschränkungen

  • Nur öffentlich zugängliche Websites werden unterstützt.
  • Nicht alle Websites haben zugängliche Design-Tokens; die Ergebnisse können variieren.
  • Die extrahierten Tokens bieten einen Ausgangspunkt und müssen möglicherweise manuell angepasst werden.

Verwandte Skills

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community