Design Skill — Design skill for Claude Code
Unified /design meta-skill for Claude Code — bundles UI/UX, typography, color theory, GSAP animation, Framer Motion, layout, brand systems, and anti-slop rules into one command.
How to install Design Skill
This entry records only its repository, not the path inside it, so there is no
exact command to give. Open Vdebug/design-skill and copy the folder into
~/.claude/skills/, or the file into ~/.claude/agents/.
What Design Skill does
Unified /design meta-skill for Claude Code — bundles UI/UX, typography, color theory, GSAP animation, Framer Motion, layout, brand systems, and anti-slop rules into one command.
Alternatives in Design
- Theme Factory — Style artifacts with professional themes including 10 pre-set color/font combinations 94.1k ★
- Site — Crawl a whole site and synthesize ONE canonical design system across all pages — unified tokens, coverage map 3.6k ★
- Website Builder Setup — Build professional animated websites with Claude Code — no coding needed 313 ★
README
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/designOption 2 — Manual copy
- Download or clone this repo
- Copy the
SKILL.mdfile into~/.claude/skills/design/SKILL.mdmkdir -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"Related Skills
Impeccable Design
Deterministic design principles, layout heuristics, and anti-slop detector rules for creating production-grade
Tomevault Design
AUTO-INVOKE on any task that touches frontend, UI, design, components, layout, page, styling, brand, logo, col
Ten Rules Skill
One Claude Code/Codex/Gemini skill that routes a task to the right '10 rules' set (web-design, communication,
Design Taste Frontend
Anti-slop frontend skill for landing pages, portfolios, and redesigns. The agent reads the brief, infers the r
Anti Slop Designer
Use when a UI looks machine-made rather than decided. Violet gradients, glassmorphism everywhere, identical ca
Unslop Skill
Editorial guard and anti-slop skill for Claude Code, Gemini, and Codex. Enforces professional bilingual standa
Related Agents
Animation Implementer
Specialized coding agent that implements motion design specs using Framer Motion, GSAP, and Three.js. Use this
Animation Engineer
Builds motion and animation — CSS transitions/keyframes, the Web Animations API, SVG animation, scroll-driven
Engineering Design Specialist
Expert design engineer specializing in visual judgment, typography, spacing, color hierarchy, motion polish, a
