Skip to content
Development
SkillAuto-invokedWhat is this?This plugin ships a FLOW.md router the engine fires, so the matching skill runs itself. No slash command to remember.Learn how →

/design-dna

Extract, define, and apply design DNA across three dimensions: design system (tokens), design style (qualitative feel), and visual effects (Canvas, WebGL, 3D, particles, shaders, scroll effects, etc.). Use this skill when: (1) a user wants to see the full 3-dimension design

@zanweizanwei@zanwei
From plugin
design-dnaSee the plugin
1.2k1 skills
shell
$ npx -y skills add zanwei/design-dna --skill design-dna --agent claude-code

How it fires

How this skill gets triggered: by you, by Claude, or both.

  • Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.
  • You can call itInvoke it directly when you want it.
  • Slash command/design-dna
How auto-invocation works

Context preview

The summary Claude sees to decide when to auto-load this skill.

Extract, define, and apply design DNA across three dimensions: design system (tokens), design style (qualitative feel), and visual effects (Canvas, WebGL, 3D, particles, shaders, scroll effects, etc.). Use this skill when: (1) a user wants to see the full 3-dimension design
Ships withdesign-dna

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

Get the whole plugin, auto-invoked
Stats
JavaScriptNodeHTMLCSSBash
+6 tags
VercelGitGitHubMarkdownMermaidAnthropic
1,230
Stars
0
Views
62
Forks
Maintained
Maintenance
MIT
License
3mo ago
Last commit
4mo ago
Created

Repo: zanwei/design-dna