Communitygithub.com

lawrencewzen/design-extract

🎨 Universaler Agent-Skill: Interaktiver Picker, der verstreute visuelle Vorlieben in ein persönliches Brand-Design-System extrahiert (design.md + theme.css + preview.html) · Claude Code / Codex / opencode / pi

Was ist design-extract?

Dieser Skill verwandelt visuelles Feedback – wie Screenshots, Farbcodes oder Stilbeschreibungen – in ein konsistentes, wiederverwendbares Design-System für KI-Agenten. Entwickelt für Claude Code, Codex, opencode und pi, interagiert erüber einen interaktiven Picker, um Designentscheidungen zu treffen. Die Ausgabe besteht aus drei Dateien: einer Design-Markdown-Datei, die die Designentscheidungen dokumentiert, einem Theme-CSS für die direkte Anwendung in Projekten und einer Vorschau-HTML, die das System visuell darstellt. Ideal für Entwickler und Designer, die schnell ein maßgeschneidertes Design-System erstellen möchten, ohne manuell jede CSS-Eigenschaft anpassen zu müssen. Der Skill extrahiert aus unstrukturierten Eingaben wie Beschreibungen oder Bildern eine kohärente visuelle Identität und reduziert so den Aufwand für das Design-Onboarding in neuen Projekten.

Funktioniert mit✓Claude Code✓Codex CLI~Cursor✓OpenCode
Part ofDesign & UI
npx skills add lawrencewzen/design-extract
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 design-extract?

🎨 Universal Agent-Skill: Interaktiver Picker, der verstreute visuelle Vorlieben in ein persönliches Brand-Design-System extrahiert (design.md + theme.css + preview.html) · Claude Code / Codex / opencode / pi

Übersicht

Dieser Skill ermöglicht es KI-Agenten, aus visuellen Referenzen (Screenshots, Farbpaletten, Stilbeschreibungen) ein strukturiertes Design-System zu erstellen. Der interaktive Picker führt durch die Auswahl und Anpassung von Design-Token.

Funktionsweise

  1. Eingabe: Der Benutzer liefert visuelle Referenzen (Bilder, URLs, Beschreibungen).
  2. Picker-Interaktion: Der Agent präsentiert Auswahlmöglichkeiten für Farben, Typografie, Abstände und Komponentenstile.
  3. Ausgabe: Generiert drei Dateien:
    • design.md: Dokumentation der Designentscheidungen
    • theme.css: Anwendbares CSS mit Custom Properties
    • preview.html: Visuelle Vorschau des Design-Systems

Voraussetzungen

  • Claude Code / Codex / opencode / pi mit Zugriff auf Dateisystem
  • Optional: Bildanalyse-Fähigkeiten für Screenshot-Interpretation

Verwendung

# Beispiel: Starten des interaktiven Picker-Prozesses
design-extract --input "meine-referenz.png" --output ./mein-design

Konfiguration

Keine spezielle Konfiguration erforderlich. Der Skill erkennt automatisch die Umgebung und passt die Interaktion an.

Lizenz

MIT

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