Design-Systeme
Design DNA
Extrahiere ein Referenzdesign in strukturiertes JSON und generiere daraus.
Worum es geht
Ein dreiphasiger Workflow, der Design-Identität über messbare Tokens, qualitativen Stil und visuelle Effekte erfasst. Er gibt ein vollständiges Design-DNA-JSON aus und wendet dieses JSON dann auf neuen Content an.
>-
Warum das fürs Design zählt
- Macht aus einem Screenshot oder einer URL benannte Farb-, Schrift- und Abstandswerte.
- Erfasst Stimmung, Komposition und Brand Voice, nicht nur messbare Tokens.
- Erfasst Canvas-, WebGL-, Shader- und Scroll-Effekte, die reines CSS nicht ausdrücken kann.
Was es abdeckt
- Design system tokens
- Design style
- Visual effects
- Analyzing references
- Generating from JSON
- Phase combinations
So installierst du es
Design DNA
-
Klone das Repo.
git clone https://github.com/zanwei/design-dna -
Verweise Codex auf die Skill-Datei.
SKILL.md -
Beschreibe dann das gewünschte UI. Codex folgt dem Skill.
So nutzt du es mit Codex
-
Verlange das Schema, um alle drei Dimensionen zu sehen, bevor du etwas analysierst.
-
Gib Codex Referenzbilder oder URLs und verlange ein befülltes DNA-JSON.
-
Übergib das JSON plus deinen Content, um eine eigenständige HTML-Seite zu erzeugen.
Jedes Plugin hier ist kostenlos, quelloffen und verlinkt auf seine echte Originalquelle.
Mehr auf der codex-design-Liste ↗Weitere Codex-Design-Plugins
Frontend & UI Was es macht gpt-taste Baut preisverdächtige Landingpages mit GSAP-Scroll-Motion und lückenlosen Bento-Grids. 
Design-Systeme Was es macht Stitch Design Taste Schreibt eine DESIGN.md, die Google Stitch zu nicht-generischen Screens lenkt. 
Frontend & UI Was es macht image-to-code Erzeugt zuerst Design-Bilder, analysiert sie und baut dann passenden Frontend-Code. 
Frontend & UI Was es macht imagegen-frontend-mobile Erzeugt hochwertige Mobile-App-Screen-Flows als Bilder, nicht als Code. Nächster Schritt
Mit Open Design designen, ohne Setup
Installiere dieses Plugin selbst, oder leg mit Open Design eine ganze kuratierte Design-Ebene um Codex. Eigener Key, eigenes Ergebnis.