PlaybookKnowledge BaseTools
Get started

Campaigns · 2 available

Self-driving campaigns for design systems.

Paste one prompt into Claude Code or Cursor. The agent works through every step in order, asks for input when needed, and pauses before advancing.

campaign · 11 steps

Bootstrap a Design System

Take a new design system from blank canvas through visual language establishment, a complete token system, core components, and a lightweight documentation site — in four structured phases.

establish-context →establish-visual-language →generate-design-md →generate-color-scheme →generate-type-scale →generate-shape-tokens →generate-spacing-tokens →generate-style-dictionary →scaffold-core-components →generate-page-examples →setup-documentation-site
View
campaign · 5 steps

Audit and Refactor a Design System

Run a structured health check on an existing design system — surface token drift, flag accessibility gaps, document what's changed, and plan the next iteration.

session-start →audit-token-coverage →accessibility-audit →design-system-retrospective →plan-next-iteration
View

Structured plays and grounded reference material for AI-assisted design system work.

Playbook

  • Browse plays
  • Bootstrap campaign
  • Audit campaign

Knowledge Base

  • Principles
  • Design systems
  • Standards
  • Foundations

Resources

  • How it works
  • Palette tool
  • Contrast checker
  • Type scale calculator
  • Sources
Built by John the Designer·Public beta