Plugins
8 plugins for designers
One bridge connects Claude Code to Figma; the rest are capabilities, one thing each, installed through Claude Code's native plugin system.
The bridge
Capabilities
Grouped by how designers work.
Brand & context
3BRAND.md
BRAND.md: your brand's identity and mascot as a Claude Code plugin. Interview to a BRAND.md, generate a monoline SVG mascot, and seed VOICE.md and DESIGN.md.
/plugin install brand@designagentVOICE.md
VOICE.md: proofread copy against a house voice and strip the AI tells (em dashes, hype, filler), keeping commands, ids, and code literally unchanged.
/plugin install voice@designagentDESIGN.md
DESIGN.md: scaffold and sync your design system, then lint the code against its own rules (borders vs shadows, off-grid spacing, extra typefaces, over-cap weights).
/plugin install design@designagentVisual & build
2tokens
Extract your design tokens from code (colors, spacing, type, radius) with deterministic clustering and hardcoded-value drift detection, and keep DESIGN.md in sync.
/plugin install tokens@designagentbackgrounds
Generate self-contained, brand-aware background effects (animated WebGL shader, dot-grid, or ASCII art) recolored from your DESIGN.md, with reduced-motion and fallbacks baked in.
/plugin install backgrounds@designagentReview & QA
2designreview
AI design review for Claude Code: connects PRD, research, Figma, and analytics to review design intent (not pixels) and surface gaps before handoff or launch. Reads and annotates Figma through the DesignAgent bridge. Run /new, /review, /annotate.
/plugin install designreview@designagentdesign-qa
Does the build match the design? Screenshots your running UI, diffs it against the Figma frame / DESIGN.md, and reports layout, spacing, color, and type drift by severity.
/plugin install design-qa@designagent