Design with Claude
29 specialist agents + 1 master command — 30 design experts as Claude Code commands. Bring senior design expertise into every coding session.
No runtime. No dependencies. No API keys. Just markdown files that give Claude deep design knowledge.
designwithclaude.com
What This Is
A collection of 29 design agent files — each one a specialist in a specific design domain (accessibility, motion design, color theory, checkout flows, etc). Install them as a Claude Code plugin, and you get expert-level design guidance directly in your coding workflow.
Each agent contains structured domain knowledge: WCAG specifics, token architecture patterns, motion timing curves, healthcare UX compliance rules, checkout conversion best practices. This isn't generic "help me design" prompting — it's deep, opinionated expertise.
Install
As a Plugin (recommended)
# Add the marketplace
/plugin marketplace add imsaif/design-with-claude
# Install the plugin
/plugin install design-with-claude@design-with-claude
Commands are namespaced: /design-with-claude:design-brief, /design-with-claude:accessibility-specialist, etc.
As Standalone Commands
If you prefer shorter command names (no namespace prefix):
# Clone the repo
git clone https://github.com/imsaif/design-with-claude.git ~/.design-with-claude
# Copy commands to your user-level commands directory
cp -r ~/.design-with-claude/commands/ ~/.claude/commands/
This gives you /design-brief, /accessibility-specialist, etc. directly.
Quick Start
/design-brief Build a SaaS analytics dashboard with dark mode and accessibility focus
The master command analyzes your brief, identifies the relevant design domains (out of 29), and returns structured guidance — token recommendations, component specs, layout decisions, and implementation notes.
When invoked inside a code project, commands are context-aware: they detect your stack, read your existing files, and generate output that matches your conventions.
Example Output
## Brief Analysis
"SaaS analytics dashboard with dark mode and accessibility focus"
Product type: B2B SaaS dashboard
Key requirements: data visualization, dark theme, WCAG AA compliance
## Relevant Domains (7 of 29)
1. Dashboard Designer — KPI cards, chart layout, data density
2. Dark Mode Specialist — surface hierarchy, elevation tokens, contrast
3. Accessibility Specialist — WCAG AA, focus management, screen readers
4. Data Visualization Specialist — chart selection, color-blind palettes
5. Design System Architect — dark/light token architecture
6. Color Specialist — semantic colors with dark mode variants
7. Typography Specialist — data-dense type scale, monospace for numbers
## Token Recommendations
--surface-primary: hsl(220 20% 10%) /* main background */
--surface-secondary: hsl(220 18% 14%) /* card surfaces */
--surface-elevated: hsl(220 16% 18%) /* modals, dropdowns */
--text-primary: hsl(220 10% 93%) /* high-emphasis text */
--accent-primary: hsl(210 100% 60%) /* interactive elements */
--data-series-1: hsl(210 90% 60%) /* chart color 1 */
...
## Component Recommendations
- KPI cards: icon + metric + trend + sparkline, 4-column grid
- Charts: use accessible palette with pattern fills for color-blind users
- Tables: sticky headers, alternating row contrast ≥ 3:1
- Navigation: sidebar with collapsible sections, active state at ≥ 4.5:1
## Implementation Notes
- Dark mode as default, light mode as toggle (not vice versa)
- All interactive elements need visible focus rings (2px solid, offset 2px)
- Chart tooltips must be keyboard-accessible (not hover-only)
- Minimum touch target: 44x44px for any clickable element
Commands
Master Command
| Command | What it does |
|---|
design-brief | Takes a natural language brief → identifies relevant agents → outputs comprehensive design guidance |
Core Design
| Command | Use when... |
|---|
visual-hierarchy-specialist | Layout, hierarchy, spacing, focal points |
interaction-designer | User flows, states, gestures, feedback |
design-system-architect | Tokens, component APIs, theming |
accessibility-specialist | WCAG compliance, ARIA, keyboard nav |
Visual Design
| Command | Use when... |
|---|
typography-specialist | Type scales, font pairing, vertical rhythm |
color-specialist | Color systems, palettes, semantic colors |
spacing-layout-specialist | Grid systems, spacing scales, density |
Interaction Design
| Command | Use when... |
|---|
motion-designer | Transitions, timing curves, micro-interactions |
form-designer | Input layout, validation, multi-step forms |
navigation-specialist | Nav patterns, wayfinding, menus |
Product Design
