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 structure/schema, (2) a user provides images, screenshots, or URLs of reference designs and wants them analyzed into a structured JSON profile covering all three dimensions, (3) a user has a Design DNA JSON and content and wants a design generated from it, or (4) any combination of these phases. Triggers on "design DNA", "e

2,056 stars 114 forksFrontend & Design

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add zanwei/design-dna --skill design-dna

Manual install

git clone --depth 1 https://github.com/zanwei/design-dna.git /tmp/design-dna
mkdir -p ~/.claude/skills
cp -r /tmp/design-dna/. ~/.claude/skills/design-dna

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# Design DNA

A 3-phase workflow for extracting, structuring, and applying design identity across three dimensions:

1. **Design System** — measurable tokens (color, typography, spacing, layout, shape, elevation, motion, components)
2. **Design Style** — qualitative perception (mood, visual language, composition, imagery, interaction feel, brand voice)
3. **Visual Effects** — special rendering (Canvas, WebGL, 3D, particles, shaders, scroll effects, cursor effects, SVG animations, glassmorphism, etc.)

## Phases

### Phase 1: Structure — Output the Schema

When the user asks for the structural dimensions or schema:

1. Read [references/schema.md](references/schema.md)
2. Present the full schema with field descriptions
3. Explain the three dimensions and their roles:
   - **design_system**: What you can measure — exact hex values, pixel sizes, rem scales
   - **design_style**: What you can feel — mood, personality, composition strategy
   - **visual_effects**: What you can see but can't express in CSS alone — WebGL scenes, particle systems, shader distortions, scroll-driven animations
4. Ask if the user wants to customize or extend any dimensions

### Phase 2: Analyze — Extract DNA from References

When the user provides images, screenshots, or links representing a target design style:

1. Read [references/schema.md](references/schema.md) for the full field list
2. For each reference provided:

Read the full skill on GitHub

Details

Skill name: design-dna
Repository: zanwei/design-dna
License: MIT
Repo updated: 28 August 2026
Copies: Found in 2 GitHub repos

FAQ

What does the Design Dna skill do?

How do I install the Design Dna skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add zanwei/design-dna --skill design-dna. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Design Dna popular?

It lives in zanwei/design-dna, which has 2,056 GitHub stars and 114 forks.

Related skills

Logo Generator

2.3k

op7418/logo-generator-skill

Generate professional SVG logos and high-end showcase images. Use when the user wants to: (1) Create a logo or icon for their product/brand, (2) Generate logo design concepts based on product information, (3) Create professional logo showcase presentations with multiple background styles, (4) Export logos in various formats (SVG, PNG), or (5) Iterate on logo designs with different visual styles. Supports geometric patterns, dot matrix designs, line systems, and mixed compositions. Generates showcase images using Nano Banana (Gemini image generation) with 12 professional background styles.

Frontend & Design177

Uncodixfy

2.7k

cyxzdev/Uncodixfy

Prevents generic AI/Codex UI patterns when generating frontend code. Use this skill whenever generating HTML, CSS, React, Vue, Svelte, or any frontend UI code to enforce clean, human-designed aesthetics inspired by Linear, Raycast, Stripe, and GitHub instead of typical AI-generated UI.

Frontend & Design167

Zhengxi Views

1.8k

lyra81604/zhengxi-views

郑希观点库——基于易方达基金经理郑希 2012–2026 年全部公开观点原文语料，外加从语料蒸馏、有本人原话佐证的郑希投资方法的可溯源 research skill。能做： (1) 溯源问答——他怎么看 AI算力/光通信/新能源/半导体/ROE 等，引用其原话作答； (2) 讲解他的投资方法/框架/选股逻辑；(3) 前瞻应用——用他的方法分析当下任意主题/行业/个股，语料没谈过也能据框架推演； (4) 风格化点评——用他季报/手记的口吻写市场点评、季度展望； (5) 言行对照——用他全部基金真实数据（季度持仓/净值/业绩/规模/任职回报）核对"说的"与"买的"，或答他的业绩/重仓/规模； (6) 全市场查询对比——内置约 2.7 万只基金列表，按需抓任意基金真实数据做查询或与郑希对比； (7) 郑希框架评分——给一只基金按他的方法打分（多像郑希会买的）。 When the user mentions 郑希/易方达郑希/zhengxi, asks his view on a sector/stock/theme, his 投资方法/框架/选股/风格/持仓/业绩/净值/规模, wants to apply his approach, a commentary 用郑希口吻, to check words vs holdings, or to look up/compare/score A

Frontend & Design192

Pixel2motion

2.6k

nolangz/pixel2motion

Turn a raster logo (PNG/JPG/WebP/screenshot) into a clean minimal SVG with edge smoothness as the primary hard gate and IoU optimized as high as reasonably possible without a fixed global threshold, then into a choreographed logo animation delivered as standalone JS-rendered HTML, applying Disney's 12 animation principles. Use when asked to animate a logo, build a logo reveal / splash screen / brand intro, convert a logo image into animated SVG or HTML, add motion to a vectorized mark, or create loading/idle/hover motion for a brand mark. v2: also handles self-crossing draw-on choreography (sp

Frontend & Design212

Pretty Mermaid

1.6k

imxv/Pretty-mermaid-skills

Generate and render Mermaid diagrams for architecture docs, READMEs, PRs, terminals, chats, and CI as themed SVG, PNG, or ASCII/Unicode art. Use this skill whenever the user provides Mermaid code or .mmd files; asks for a flowchart, sequence/state/class diagram, ERD, XY chart, or architecture/workflow/data-model visualization; or wants to beautify, theme, batch-convert, or make a diagram terminal-friendly. Runs locally without a browser or DOM, with 15 built-in themes and custom colors.

Frontend & Design77

Oil Motion

2.7k

oil-oil/oil-motion

把 AI 生成或已有的视频、序列帧变成随滚动、指针、拖动、触摸、设备方向、音频、数据或状态变化的网页动画：设计动作方向，生成关键帧与视频，整理成图集或视频，编译时间轴并接入运行时。用户需要角色转向、产品拆解、镜头穿越、一镜到底转场，或要清理、抠色、补帧、压缩绿幕视频与雪碧图时使用。不用于纯 CSS、JS、SVG、Lottie 或实时 3D 就能完成的界面过渡与微交互（交给普通前端实现），也不用于独立成片剪辑、单张配图或静态页面。

Frontend & Design201

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.