A Claude Code plugin that turns Claude Code into a senior designer. Bootstraps design systems, generates polished components and dashboards, and iterates visually with a screenshot-based critique loop.
Optional: npx playwright install chromium for the visual loop.
What ships in the box
Senior UI/UX, encoded.
Visual feedback loop
Playwright captures the rendered page, Claude critiques the pixels against a 100-point rubric, applies fixes, and re-captures until the bar is met.
Senior dashboard literacy
App shells, KPI tiles, data tables, chart cards, filter bars, command palette, notifications — all blueprinted and ready to drop in.
Color engineering
OKLCH ramps, WCAG + APCA contrast, colorblind-safe palettes, image extraction, and perceptual mixing — handled at a senior level.
Motion that respects users
Framer Motion for React, Motion One for vanilla, GSAP for heavy timelines. Every animation is `prefers-reduced-motion`-safe by default.
6 curated palettes
Warm-editorial, neon-brutalism, cool-corporate, soft-pastel, deep-monochrome, vibrant-tech — each WCAG-checked across light and dark.
Encoded design rules
Tinted neutrals, the 60–30–10 distribution, mobile iOS/Android grid, and a sidebar spacing cheat sheet — Claude consults them automatically.
The constitution
Seven hard rules every artifact obeys: 300-line cap, no hardcoded values, full state coverage, plus motion, a11y, and dark-mode parity.
Stack-agnostic
Adapts to React, Vue, Svelte, and Solid; works with Tailwind, CSS Modules, styled-components, or plain CSS — never forces a new framework.
Eight slash commands
Everything Claude needs to ship clean UI.
Bootstrap a design system: tokens, primitives, motion presets, dark mode.
/design init
bash
/shipit-ui-design:designinit
How /refine works
Claude looks at the pixels, not just the source.
The visual loop screenshots your rendered page across viewports and themes, scores it against a 100-point rubric, applies fixes, re-screenshots, and iterates until the bar is met.
01detectfind dev script
02bootstart dev server
03capturescreenshot viewports
04critiquescore the rubric
05planrank fixes by impact
06editapply changes
07loopuntil score ≥ 85
Rubric breakdown
Visual hierarchy92
Spacing & rhythm88
Color & contrast95
After /refine
6791/100
one pass, +24 points
The new default
Rich by default. Plain is a failure.
On marketing surfaces, Claude reaches for illustrations, layered surfaces, and animated decoration before reaching for a plain card. /refine hard-caps your score at 80 when Visual Richness drops below 4/10.
Same intent. Two outputs./component "marketing hero"
Plain · what most LLMs ship
Rubric score0/100
Rich · what shipit-ui-design ships
Rubric score0/100
Score cap when Visual Richness < 4/10ceiling 80/100
Syntax-highlighted with chrome — never plain <pre>
9 categories · totals 100
The full rubric
NEW= added in the power-up
Visual hierarchy10
Spacing & rhythm15
Color & contrast15
Typography10
Motion & polish10
Density10
Component quality10
Accessibility10
newVisual richness10
Auto-activating skills
They turn on without you asking.
ui-design-principles
.tsx .jsx .vue .svelte
motion-design
motion work, /motion
design-system-keeper
tokens.css, theme files
svg-illustration
/illustrate, .svg edits
three-d-scene
/scene, R3F files
dashboard-design
/admin /dashboard /console paths
data-visualization
chart code, KPI tiles
color-engineering
color tokens, palette work
The constitution
Seven rules every artifact obeys.
These are non-negotiable. Every component, every palette, every illustration the plugin generates follows them.
1
Rule 1: Max 300 lines per file.
If a component would exceed, it splits.
2
Rule 2: No hardcoded design values.
Colors, spacing, radii, shadows, durations — all from tokens.
3
Rule 3: Every interactive element has hover, active, focus-visible, disabled.
State coverage is non-optional. Affordance must be obvious without a tooltip.
4
Rule 4: All motion respects prefers-reduced-motion.
Every transition and animation provides a calm fallback for users who request one.
5
Rule 5: Every image / illustration has alt text or aria-hidden if decorative.
No mystery images. Decorative SVGs are explicitly marked as such.
6
Rule 6: Dark mode is never an afterthought.
Emitted alongside light from the start. Same hue, only L and C change.
7
Rule 7: Stack-respect: never introduce a new framework or styling system.
Adapt to whatever the project already uses. Tailwind, CSS Modules, styled-components, vanilla CSS.
Generated code
Tokenized on day one.
What most LLMs ship
bare hex, raw px, no states
button.css — anti-pattern
css
.button{background:#4f46e5;padding:12px24px;color:white;border-radius:8px;font-size:14px;/* no hover. no active. no focus. no disabled. no dark mode. */}
Every token resolves to a value in tokens.css — flip dark mode, swap brand color, reskin the whole product.
Common questions
Things people ask.
What does it actually do?
Bootstraps design systems, generates polished components and dashboards, and iterates visually via screenshot critique. It works inside your existing project — never as a standalone artifact.
Which stacks does it work with?
Adapts to React, Next, Vite, Remix, Astro, Nuxt, SvelteKit, and React Native. Styling: Tailwind, CSS Modules, styled-components, or vanilla CSS. It auto-detects what you already use.
Do I need Playwright?
Only for the /refine command. Other commands work without it. One-time install: npx playwright install chromium.
Is it free?
Yes — MIT licensed. Claude Code itself follows Anthropic’s pricing.
Can I install it for my whole team?
Yes. During install, choose Project scope. The plugin gets committed to .claude/settings.json so collaborators on the repo install automatically.
How is this different from a linter?
Linters check rules. This plugin generates polished UI from scratch and iterates against rendered pixels via screenshot critique. It’s a designer, not a linter.
Why slate-tinted neutrals?
See the tinted-neutrals.md design rule. Pure white on pure black is too high-contrast and tiring; tinted greys carry depth, elevation, and a hint of harmony with your brand.
Will it conflict with my own design system?
No. It detects existing tokens and merges; it never overwrites. It also auto-discovers your stack and respects your styling system.
