design-dna
Extract any website's visual style and rebuild it as your own design
All Skills in This Repository (1)
Pure Emerald Level IndicatorsFrequently Asked Questions
FAQPage SchemaHow to install design-dna?▼
Run `npx skills add zanwei/design-dna --all -g -y` in your terminal to install the skill globally for your AI agent.
How to copy a website's design style with AI?▼
Give your agent screenshots or URLs of the design you like, and it extracts a complete Design DNA JSON covering colors, fonts, layout, and effects that can be applied to your own content.
What is a Design DNA JSON?▼
It is a structured, machine-readable profile of a design's identity, including measurable tokens, qualitative style, and visual effects, which you can save, share, and reuse across projects.
Does design-dna work with Claude Code and Cursor?▼
Yes. It follows the universal Agent Skills standard and works with Claude Code, Cursor, Codex, GitHub Copilot, and other supported agents.
How accurate are the extracted colors?▼
The skill measures exact pixel colors with deterministic scripts instead of guessing by eye, then verifies the generated output with pass/fail color-difference scoring.
Related Repositories in Design & Creative
View All in Design & Creative→
nextlevelbuilderui-ux-pro-max-skill
AI design intelligence for professional UI, brands, and presentations
shadcn-uiui
Build and customize beautiful React component libraries with AI
nexu-ioopen-design
Open-source AI design studio for decks, prototypes, images, and video