zanwei

zanwei / design-dna

Public

Turn reference UIs (images, screenshots, URLs) into quantified Design DNA JSON—tokens, qualitative style, visual effects—then generate matching UI from your content.

agent-skills claude-skills codex-skills cursor-skills design-dna
46
2
100% credibility
Found Mar 24, 2026 at 46 stars -- GitGems finds repos before they trend. Get early access to the next one.
Sign Up Free
AI Analysis
AI Summary

A skill for AI agents that analyzes screenshots or URLs to extract a structured visual design profile and generates matching user interfaces from it.

How It Works

1
🔍 Spot a Stunning Design

You come across a website or app with a beautiful visual style that you want to recreate for your own project.

2
💡 Discover Design DNA

You find this helpful tool that lets your AI assistant capture and reuse the essence of any design you love.

3
➕ Connect to Your AI Helper

You easily add the tool to your favorite AI coding companion so it's ready to use.

4
📸 Gather Inspiration Images

You collect screenshots, pictures, or links to the designs that inspire you.

5
🔬 Capture the Design Essence

Your AI carefully studies the images and creates a full blueprint called Design DNA, detailing every color, feel, and effect.

6
🎨 Build Your Matching Design

You give the blueprint along with your own content, and the AI crafts a beautiful page that perfectly matches the style.

✨ Style Magic Unlocked

You now have a gorgeous, production-ready design that feels just like your inspiration, ready to share and iterate on.

Sign up to see the full architecture

5 more

Sign Up Free

Star Growth

See how this repo grew from 46 to 46 stars Sign Up Free
Repurpose This Repo

Repurpose is a Pro feature

Generate ready-to-use prompts for X threads, LinkedIn posts, blog posts, YouTube scripts, and more -- with full repo context baked in.

Unlock Repurpose
AI-Generated Review

What is design-dna?

Design-dna turns reference UIs—screenshots, images, or URLs—into quantified Design DNA JSON, capturing tokens like colors and spacing, qualitative style like mood and composition, and visual effects like shaders or glassmorphism. You feed it references for design dna analyse, get a complete JSON spec, then generate production-ready HTML/CSS/JS matching that style with your own content. Built as a Node.js agent skill, install via `npx skills add zanwei/design-dna` for seamless use in tools like Cursor or Claude Code.

Why is it gaining traction?

It stands out by making subjective design replication objective: extract once, reuse the JSON across projects or teams, chaining analyze-to-generate phases without manual tweaking. Developers hook into the agent skills spec for 40+ AI coding environments, turning vague "make it look like that" into precise, version-controlled specs. Early adopters praise the full-field JSON output that notes conflicts from multiple turn in reference sources.

Who should use this?

Frontend devs prototyping UIs from design dna canva mocks or competitor sites, solo makers cloning visual effects for landing pages, and design teams at agencies standardizing design dna architecture across client work. Ideal for those in Cursor or GitHub Copilot workflows needing quick, faithful recreations without pixel-pushing.

Verdict

Promising for agent-driven design dna 2025 workflows, but at 46 stars and 1.0% credibility score, it's early-stage with basic docs—test on non-critical projects first. Worth a spin if you're in the Vercel skills ecosystem; skip if you need battle-tested maturity.

(178 words)

Sign up to read the full AI review Sign Up Free

Similar repos coming soon.