Source Design Plugin

Production-grade frontend design agent pack for Claude Code. Prevents generic "AI slop" and enforces intentional, distinctive design across all frontend work.

Quick Reference

Agents (use via Use [agent] to...)

Agent	Invoke	Purpose
Design Director	Use design-director to...	Orchestrate design workflow, anti-slop enforcement, specialist coordination
Motion Designer	Use motion-designer to...	Framer Motion, CSS transitions, parallax, stagger reveals, micro-interactions
Typography System	Use typography-system to...	Font pairing, type scales, tracking, vertical rhythm, web font loading
Color Architect	Use color-architect to...	Semantic palettes, dark mode, contrast compliance, CSS variable tokens
Component Builder	Use component-builder to...	React components, Tailwind, shadcn/ui, CVA variants, responsive
Accessibility Auditor	Use accessibility-auditor to...	WCAG 2.2, ARIA, keyboard nav, screen readers, contrast

Commands (slash commands)

Command	Purpose
/design-brief	Generate aesthetic direction + design tokens before coding
/design-review	Audit code against design system + anti-slop rules
/design-theme	Generate complete CSS theme (light/dark, tokens, Tailwind)
/motion	Get animation specs and Framer Motion code
/typography	Get type system specs and CSS tokens
/color	Get color palette and semantic token system
/accessibility	Run accessibility audit or get a11y implementation
/component	Build production React component with all states
/fonts	Install, configure, audit fonts — supports Season Mix, Google Fonts, premium fonts
/design-audit-codex	Run parallel Codex-powered design audit across full codebase

Skills (invocable via /source-design:skill-name)

Skill	Purpose
design-brief	Full design brief generation with aesthetic direction
design-review	Comprehensive UI audit (anti-slop + a11y + quality)
design-theme	Complete theme system generator
font-setup	Install and configure fonts with zero-CLS loading

Recommended Workflow

1. Start: /design-brief — establish aesthetic direction
2. Fonts: /fonts Season Mix or /fonts list — set up typography files
3. Theme: /design-theme — generate token system
4. Build: /component or use component-builder agent
5. Animate: /motion or use motion-designer agent
6. Review: /design-review — audit before shipping
7. Accessibility: /accessibility — final compliance check

Font Management

The plugin includes a comprehensive font system:

Quick Install

/fonts Satoshi              → Install from Fontsource
/fonts Season Mix           → Premium font setup guide + config generation
/fonts list                 → Curated anti-slop font recommendations
/fonts audit                → Scan project for font issues

Featured: Season Mix + Season Sans

The gold-standard anti-slop pairing from Displaay foundry:

• Season Mix — Display: hybrid sans-serif, 62px/62px, weight 400, tracking -0.03em
• Season Sans — Body: clean complement, 15px/18px, weight 400, tracking -0.01em
• Variable font with SERF axis (0=Sans → 50=Mix → 100=Serif)
• Purchase: https://displaay.net/typeface/season-collection/ (€65+ per style, trials available)

Font Handling Capabilities

• Self-host WOFF2 files (better than CDN)
• Generate @font-face declarations with font-display and unicode-range
• Next.js next/font/local config generation
• Tailwind fontFamily config
• Fallback font metrics for zero layout shift
• Font audit (missing declarations, CDN vs self-host, unused files)

Companion Official Skills (Install Separately)

This plugin works alongside Anthropic's official skills:

• frontend-design — The foundational anti-slop skill (277k+ installs)
• theme-factory — 10 pre-built themes + custom generation
• web-artifacts-builder — React+shadcn scaffolding + artifact bundling
• brand-guidelines — Brand styling enforcement
• canvas-design — Design philosophy → visual art

Install via: /plugin marketplace add anthropics/skills

Anti-Slop Rules (Enforced by All Agents)

BANNED Patterns

• Inter/Roboto/Arial as sole font (unless project design system specifies it intentionally)
• Purple gradients on white backgrounds
• Symmetric 3-card grids with identical rounded corners
• transition: all
• Spinner loading states (use shimmer/skeleton)
• Default unstyled shadcn/ui components
• Cookie-cutter hero → features → testimonials → CTA

REQUIRED Patterns

• Distinctive typography with intentional tracking
• Committed color palette via CSS variables
• Purposeful motion (orchestrated, not scattered)
• Accessibility as baseline (WCAG AA minimum)
• All interactive states implemented
• Responsive at 320px, 768px, 1024px, 1440px

Integration with Codex

For parallel design tasks, use /design-audit-codex or the Agent-wrapped Codex pattern:

Agent({
  name: "codex-design-audit",
  description: "Codex: design system audit",
  run_in_background: true,
  prompt: "You are a Codex relay agent. Call mcp__codex__codex with:
    - prompt: 'Audit all .tsx files in src/components/ for design system compliance...'
    - sandbox: 'danger-full-access'
    - cwd: '{project_root}'
    Return the full Codex response verbatim."
})

Use Codex for read-only analysis (design audits, pattern scanning). Use Claude agents for implementation work.