Design Systems
Design DNA
Extract a reference design into structured JSON, then generate from it.
What it is
A three-phase workflow that captures design identity across measurable tokens, qualitative style, and visual effects. It outputs a complete Design DNA JSON, then applies that JSON to new content.
>-
Why it matters for design
- Turns a screenshot or URL into named color, type, and spacing values.
- Records mood, composition, and brand voice, not just measurable tokens.
- Captures Canvas, WebGL, shader, and scroll effects that plain CSS cannot express.
What it covers
- Design system tokens
- Design style
- Visual effects
- Analyzing references
- Generating from JSON
- Phase combinations
How to install
Design DNA
-
Clone the repo.
git clone https://github.com/zanwei/design-dna -
Point Codex at the skill file.
SKILL.md -
Then describe the UI you want. Codex follows the skill.
How to run it with Codex
-
Ask for the schema to see all three dimensions before analyzing anything.
-
Hand Codex reference images or URLs and request a populated DNA JSON.
-
Pass the JSON plus your content to generate a self-contained HTML page.
Every plugin here is free, open source, and links to its real upstream source.
More on the codex-design list ↗More Codex design plugins
Frontend & UI What it does gpt-taste Builds award-style landing pages with GSAP scroll motion and gapless bento grids. 
Design Systems What it does Stitch Design Taste Writes a DESIGN.md that steers Google Stitch toward non-generic screens. 
Frontend & UI What it does image-to-code Generates design images first, analyzes them, then builds matching frontend code. 
Frontend & UI What it does imagegen-frontend-mobile Generates premium mobile app screen flows as images, not code. Next step
Design with Open Design, without the setup
Install this plugin yourself, or run a whole curated design layer around Codex with Open Design. Bring your own key, own your output.