Design Skill

Design Meta-Skill for Claude Code

A unified `/design` skill for [Claude Code](https://claude.ai/code) that bundles **11 design sub-skills** into a single command. When invoked, it activates all design knowledge simultaneously to produce the best possible output.

What's Inside

Sub-Skill	Category	Source
UI/UX Intelligence	50+ styles, 161 color palettes, 57 font pairings, 99 UX rules	ui-ux-pro-max
Anti-Slop Rules	Eliminates generic AI defaults, banned fonts/icons/patterns	taste-skill + redesign-skill
Typography Systems	Font archetypes, weight hierarchy, line-length, tracking	compiled
Color Theory	5 palette archetypes, semantic token architecture, dark mode	compiled
Layout Engineering	Double-Bezel cards, bento/z-axis/editorial-split layouts	taste-skill
Animation (GSAP + Framer)	Core, ScrollTrigger, timelines, React, spring physics	gsap-skills
Visual Style Archetypes	Agency-tier, Minimalist, Brutalist, Taste-Calibrated	taste-skill
Brand Identity & Design Systems	Token architecture, shadcn/ui, brand sync	ui-ux-pro-max
Specialized Tasks	Banners, icons, slides, social media, redesign workflow	ui-ux-pro-max
Pre-Delivery Checklist	Visual, motion, layout, a11y, content, code quality gates	compiled
Creative Arsenal	30+ premium patterns: bento, magnetic buttons, scroll effects	taste-skill

Installation

Option 1 — Clone directly into Claude Code skills folder

git clone https://github.com/Vdebug/design-skill.git ~/.claude/skills/design

Option 2 — Manual copy

1. Download or clone this repo
2. Copy the SKILL.md file into ~/.claude/skills/design/SKILL.md

   mkdir -p ~/.claude/skills/design
   cp SKILL.md ~/.claude/skills/design/SKILL.md

Usage

Once installed, use it in any Claude Code session:

/design "landing page for a fintech SaaS"
/design "redesign my existing dashboard to feel premium"