Claude Code Plugin · v2.0.0

Stop shipping designs that scream “AI made this.”

design-for-ai teaches visual design principles inside Claude Code. Typography, color theory, composition, hierarchy, motion. So your interfaces have intention, not just defaults.

The convergence problem

Every AI produces the same “clean, modern” output. That sameness is now a signal. Users register the generic feeling even when they can’t name the patterns.

75%

of website credibility judgments are design-based
B.J. Fogg, Stanford Web Credibility Research

Common AI design tells

  • Inter, Roboto, or Open Sans as the default font
  • Cyan-on-dark or purple-to-blue gradient palette
  • Identical card grids: icon + heading + text, repeated
  • Everything centered, no asymmetry, no left-aligned blocks
  • Same spacing everywhere (no rhythm, no grouping)
  • Glassmorphism and gradient text used decoratively
  • Dark mode by default with glowing neon accents
  • Everything fades in from below with the same timing

Eight commands, one design workflow

From purpose through final pixel-level QA. Each command teaches the theory behind its decisions.

/design-for-ai

The router

Run CHECKER mode to audit an existing design across 10 dimensions, or APPLIER mode to build from scratch through 8 gated phases.

/design

Foundations

Purpose, audience, aesthetic direction. The decisions that frame everything else.

/exam

Design audit

Theory-backed diagnosis. Finds what’s wrong and explains why it violates design principles.

/brand

Strip AI tells

Find the convergent defaults. Replace them with choices that have character.

/fonts

Typography

Pick a body font, pair it, configure the scale. The squint test, the n-test, medium-form relationships.

/color

Color system

Build a palette from color science. Mood to base hue to color wheel scheme. Accessible by default.

/flow

Motion & interaction

Animation that means something. All eight interaction states mapped. Responsive behavior and reduced-motion.

/hone

Final quality pass

Every design principle checked before shipping. The last gate.

Two modes of operation

Checker Reviewing existing designs

  1. Purpose and foundation: is intent clear?
  2. Typography: appropriate for the medium?
  3. Proportions and layout: intentional ratios?
  4. Composition: one dominant element?
  5. Visual hierarchy: white space, weight, size?
  6. Color: follows a color wheel scheme? Accessible?
  7. SEO: semantic HTML? Heading hierarchy?
  8. Motion and interaction: all 8 states defined?
  9. Responsive: fluid type? Touch targets?
  10. Design identity: any AI tells?

Applier Building from scratch

  1. Gather design context and constraints
  2. Define purpose, personas, wireframes
  3. Choose proportional system and type scale
  4. Select body font, pair, set leading
  5. Establish dominance and hierarchy
  6. Build color palette from color wheel
  7. Semantic HTML, meta, heading structure
  8. Define animation timing and state transitions
  9. Mobile-first, fluid typography, touch targets

What it teaches

The design theory behind every recommendation.

Three layers

Purpose, medium, and aesthetics must reinforce each other. The Pantheon’s coffers exist because the dome needed them. They’re also beautiful. Technology constraints are design opportunities.

Typography

Garamond is timeless in print but blurs on screen. Medium matters. The squint test, the n-test for font pairing, max two families, no fake bold, smart quotes.

Proportions

Dimensions should relate through intentional ratios (2:3, 3:4, golden), not arbitrary pixel values. Tschichold’s method derives margins from the page itself.

Composition

Dominance, similarity, rhythm, texture, direction, contrast. One element commands attention. The eye is guided, not scattered. Not everything gets a card.

Hierarchy

White space is the most powerful tool. Then weight, then size, then color. Proportional spacing: tight within groups, generous between. Tufte’s 1+1=3.

Color

Mood drives hue. Hue drives scheme. Color wheel relationships (analogous, complementary, triadic). Hue-shifted shadows for depth. Colorblind-safe with redundant cues.

Motion

Remove an animation. Did you lose information? If not, it was decorative. 100ms micro, 300ms standard, 500ms complex. Ease-out for entries. Respect reduced-motion.

Interaction

Eight states every element needs: default, hover, focus, active, disabled, loading, error, success. 44×44px touch targets. Focus-visible. No placeholder-only labels.

“To truly be adept at designing something, you have to understand how it works. Otherwise, you aren’t designing. You’re creating a veneer. You’re drawing ponies.” — David Kadavy

Get started

$ claude “/plugin marketplace add ryanthedev/rtd-claude-inn”
$ claude “/plugin install design-for-ai@rtd”

Requires Claude Code. Once installed, type /design-for-ai in any project to start.