Extract Design System
Skill Verifiziert AktivExtrahiert Design-Primitive aus einer öffentlichen Website und generiert Start-Token-Dateien für Ihr Projekt.
Entwicklern eine schnelle Möglichkeit zu bieten, Design-Tokens von jeder öffentlichen Website zu reverse-engineeren und grundlegende Stil-Dateien für ihre Projekte zu generieren.
Funktionen
- Extrahiert Farben, Typografie, Abstände, Radien und Schatten
- Generiert Startdateien `tokens.json` und `tokens.css`
- Bietet rohe und normalisierte JSON-Ausgaben
- Erfordert ausdrückliche Bestätigung vor der Änderung bestehender Projektdateien
- Analysiert nur öffentliche Websites
Anwendungsfälle
- Initialisierung eines neuen Projekts mit Design-Tokens basierend auf dem Stil einer bestehenden Website
- Analyse der Design-Primitive einer Konkurrenz- oder Inspirations-Website
- Generierung grundlegender Stil-Assets für schnelles Prototyping
- Etablierung eines wiederholbaren Workflows zur Extraktion von Design-Tokens
Nicht-Ziele
- Behauptung, dass das extrahierte System vollständig oder pixelgenau ist
- Ableitung von Komponenten oder semantischen Tokens, die nicht explizit extrahiert wurden
- Behandlung extrahierter Ausgaben als maßgeblich ohne Überprüfung
- Automatische breite App-Neuschreibungen oder Patches für die Framework-Konfiguration
Installation
/plugin install extract-design-system@arvindrk-extract-design-systemQualitätspunktzahl
VerifiziertVertrauenssignale
Ähnliche Erweiterungen
Color Audit
100Color-only audit to extract, evaluate, and recommend improvements for the project's color system
Type Audit
100Typography-only audit covering font selection, type scale, readability, hierarchy, performance
Layout Audit
100Layout and spacing audit covering grid, spacing consistency, density, responsive behavior
Vue Router Best Practices
100Vue Router 4 patterns, navigation guards, route params, and route-component lifecycle interactions.
Develop Web Game
100Use when Codex is building or iterating on a web game (HTML/JS) and needs a reliable development + testing loop: implement small changes, run a Playwright-based test script with short input bursts and intentional pauses, inspect screenshots/text, and review console errors with render_game_to_text.
UI Design System Toolkit
99UI design system toolkit for Senior UI Designer including design token generation, component documentation, responsive design calculations, and developer handoff tools. Use for creating design systems, maintaining visual consistency, and facilitating design-dev collaboration.