# Claude Design Kit > A design discipline for Claude Code. It layers on top of Claude Code CLI: rules in CLAUDE.md, a direction file (DESIGN_MAP.md), shell hooks in .claude/hooks/ that flag default-looking UI choices after each edit (they warn, never block), skills for brief, direction, motion and audit, and three review agents. The cardinal rule: chosen, not defaulted. Every visual choice traces to the direction. ## Install ```bash npx @tansuasici/claude-design-kit init ``` Or as a Claude Code plugin: `/plugin marketplace add tansuasici/claude-plugins`, then `/plugin install design-kit@tansuasici`. Source: https://claudedesignkit.tansuasici.com Repository: https://github.com/tansuasici/claude-design-kit ## Getting Started - [Introduction](https://claudedesignkit.tansuasici.com/docs): Drop-in templates that make Claude Code design interfaces that look chosen, not defaulted. - [Why This Kit](https://claudedesignkit.tansuasici.com/docs/why-this-kit): Why a direction file, scan hooks and independent critics beat asking Claude Code to make it look good. - [FAQ](https://claudedesignkit.tansuasici.com/docs/faq): Common questions about Claude Design Kit: what it installs, what the hooks check, frameworks, and what it will not do for you. - [CLAUDE.md](https://claudedesignkit.tansuasici.com/docs/claude-md): Core agent instructions: tiered boot, the cardinal rule, approvals and verification. - [Design Map](https://claudedesignkit.tansuasici.com/docs/design-map): The single most important file: product, character, world, signature, tokens and competitors. Read first, every session. ## Design Discipline - [Slop Signs](https://claudedesignkit.tansuasici.com/docs/slop-signs): The catalogue of AI-default signs: reflex palette, glows, hype copy, heavy headings, template layouts. - [Writing a Direction](https://claudedesignkit.tansuasici.com/docs/direction-guide): Character, world, moments and signature: how to write a direction from the subject itself. - [Tokens](https://claudedesignkit.tansuasici.com/docs/tokens): Color, type, spacing and radius scales that follow from the direction instead of the framework. - [Motion](https://claudedesignkit.tansuasici.com/docs/motion): When to animate at all, easing, duration, GPU-only properties and reduced motion. - [Interface Guidelines](https://claudedesignkit.tansuasici.com/docs/interface-guidelines): Keyboard, focus, forms, layout, content, accessibility and performance rules for shipping UI. - [Brand Identity](https://claudedesignkit.tansuasici.com/docs/brand-identity): Logo, type and palette built together from one brief, with a reflex test against AI defaults. ## Agents - [Design Critic Agent](https://claudedesignkit.tansuasici.com/docs/agents/design-critic): Judges a rendered screen against DESIGN_MAP.md and the slop signs, then runs the competitor test. - [Interface Reviewer Agent](https://claudedesignkit.tansuasici.com/docs/agents/interface-reviewer): Audits UI code against the interface guidelines and returns Blocker / Major / Minor findings. - [Motion Reviewer Agent](https://claudedesignkit.tansuasici.com/docs/agents/motion-reviewer): Measures every animation against the ten motion standards and returns Block or Approve. ## Recipes - [Recipes](https://claudedesignkit.tansuasici.com/docs/recipes): How-to guides for the things you'll actually do: fill the design map, audit an existing screen, grow the Don'ts. - [Fill the Design Map](https://claudedesignkit.tansuasici.com/docs/recipes/fill-the-design-map): The setup step everything else depends on: give the agent a product, a character, a world and one signature before it writes CSS. - [Audit an Existing Screen](https://claudedesignkit.tansuasici.com/docs/recipes/audit-an-existing-screen): Find the slop in a page that already ships, decide how much there is, and fix it in nine ordered passes. - [Grow the Don'ts](https://claudedesignkit.tansuasici.com/docs/recipes/grow-the-donts): Turn one visual correction into a rule that holds next session, and the session after. ## Brief & Direction Skills - [Design Brief](https://claudedesignkit.tansuasici.com/docs/design-brief): Fill DESIGN_MAP.md from the user and the project before any design work. - [Direction](https://claudedesignkit.tansuasici.com/docs/direction): Write the five-line design direction (Product, Character, World, Moments, Signature) from the subject itself, plus the idea sentence, the competitor test, the page argument and the token set that. - [Brand Method](https://claudedesignkit.tansuasici.com/docs/brand-method): Make or critique a brand identity (logo, type, palette) as 1–4 sets built together from one brief. ## Build Skills - [Motion Craft](https://claudedesignkit.tansuasici.com/docs/motion-craft): Add or change UI animation the disciplined way. Decide first whether it should animate at all (frequency gate), name its purpose, pick the cheapest tool, then the right properties, easing, duration. ## Audit Skills - [Slop Audit](https://claudedesignkit.tansuasici.com/docs/slop-audit): Audit a screen for AI-slop signs (reflex gradients, glows, emoji icons, hype copy, heavy headings, pulsing elements, off-scale spacing, template look), decide how much slop there is (heavy, light,. - [Interface Check](https://claudedesignkit.tansuasici.com/docs/interface-check): Check UI code against the interface guidelines (keyboard, targets, forms, state and URL, feedback, touch, layout, content and accessibility, performance, dark mode, hydration, design details) and. - [Motion Review](https://claudedesignkit.tansuasici.com/docs/motion-review): Review existing or changed animation code against ten motion standards (justified, frequency-appropriate, responsive easing, sub-300ms UI, correct origin, interruptible, GPU-only, accessible,. - [Stress Ui](https://claudedesignkit.tansuasici.com/docs/stress-ui): Break a component with worst-case but realistic data (long names, unbreakable emails, CJK/RTL, 0/1/1,000 items, huge numbers, missing fields), wire a dev-only data toggle, check at 320px, 200% zoom,. ## Credits - [Sources](https://claudedesignkit.tansuasici.com/docs/sources): The projects this kit distills its workflow from, and what came from where. - [Third-Party Notices](https://claudedesignkit.tansuasici.com/docs/third-party-notices): Licenses and attribution for adapted material, including the CC BY 4.0 files from unslop. - [Changelog](https://claudedesignkit.tansuasici.com/docs/changelog): All notable changes to Claude Design Kit. ## Optional - [Full content (llms-full.txt)](https://claudedesignkit.tansuasici.com/llms-full.txt): every page concatenated for single-shot ingestion