Your AI writes code. Chef Sumi makes it look like a designer wrote it.

Quick Start · The Problem · What You Get · Commands · How It Works

---

Quick Start

# Install (one command)
mkdir -p ~/.claude/plugins && git clone https://github.com/phazurlabs/sumi.git ~/.claude/plugins/sumi

# Restart Claude Code, then:
/style fintech          # generate a complete design system
/fix                    # transform AI slop into production UI
/grade                  # get a 0-100 design quality score

That's it. No API keys. No accounts. No dependencies.

---

The Problem

AI coding tools generate UI that works but looks like AI wrote it.

You've seen it: the same purple gradient. The same Inter font. The same rounded cards on white. The same three-column grid. Every AI-generated app looks identical because LLMs produce the statistical average of their training data — not intentional design.

The numbers tell the story:

66% of developers	say "almost right, but not quite" is their #1 AI frustration — Stack Overflow 2025
94.8% of websites	fail basic accessibility standards — WebAIM 2025
1.7x more issues	in AI-generated code vs human-written — CodeRabbit 2025
~33% pass rate	for WCAG compliance in AI-generated UI — Standard Beagle 2025

Chef Sumi fixes this. It's a design intelligence layer for Claude Code that transforms raw AI output into production-quality UI — with real typography, real color systems, real accessibility, and real design consistency.

---

What You Get

/fix — Transform AI slop into production UI

Paste any AI-generated code. Get back production-quality code with every design issue fixed.

/fix

• Detects 60+ AI slop patterns across 7 dimensions
• Fixes typography, color, spacing, layout, states, accessibility
• Generates design tokens if none exist
• Preserves all business logic — only transforms the design layer
• Shows before/after quality score

/style — Generate a complete design system

One word. Complete design system. Zero questions asked.

/style fintech

Outputs: color palette (oklch + hex), font pairing, type scale, spacing grid, motion curves, radius + shadows, tone of voice, CSS custom properties, W3C design tokens, and 5 reference apps. Saves to .sumi/style.json so every future command inherits your decisions.

10 starter recipes built in:

Recipe	DNA	Recipe	DNA
/style saas	Linear	/style education	Duolingo
/style fintech	Stripe	/style social	Discord
/style ecommerce	Shopify	/style devtools	GitHub
/style healthcare	One Medical	/style landing	Vercel
/style creative	Awwwards	/style mobile	iOS/Android

/grade — Design Quality Score (0–100)

Like Lighthouse, but for design. One number. Seven dimensions.

/grade

Dimension	Weight
Visual Hierarchy	20%
Typography System	15%
Color System	15%
Spacing & Layout	15%
Component Quality	15%
Accessibility	10%
Design Coherence	10%

Score 80+? Get a Designed with Chef Sumi badge for your README.

Compare against the best: /grade vs stripe — see exactly where you stand.

/screen & /component — Platform-aware code

Tell Chef Sumi what you're building. Get production-ready code for your platform.

/screen dashboard for a fintech app
/component modal for confirming payments, trust-first

• Web: React + TypeScript + Tailwind, all states, responsive breakpoints
• iOS: SwiftUI with iOS 26 Liquid Glass, Dynamic Type, haptic feedback
• Android: Jetpack Compose with Material 3 Expressive, dynamic color
• Cross-platform: React Native / Flutter with platform-adaptive styling

Every component ships with 10 states, full ARIA/accessibility, keyboard navigation, dark mode, and test skeleton.

/before-after — Visual proof

See exactly what changed and why. Shareable comparison for PRs, portfolios, or stakeholders.

/before-after

Scores 10 design dimensions before and after. Shows category-by-category code diffs. Outputs a one-line shareable verdict.

---

Commands

Make — design and build

Command	Output
/fix	Anti-slop engine — transforms AI-generated UI into production quality
/style	Complete visual identity — palette, type, spacing, tokens, references
/screen	Production screen — 30+ types, all states, responsive, accessible
/component	Production component — React/SwiftUI/Compose, 10 states, ARIA, tests
/page	Full page — block composition, spacing rhythm, SEO, lazy loading
/form	Complete form — validation, multi-step, Zod schema, accessibility
/nav	Navigation — sidebar, top bar, bottom tabs, command palette
/palette	Color system — oklch scales, APCA scores, dark mode mapping
/type	Typography — font pairing, type scale, fluid sizing, platform stacks
/tokens	W3C design tokens — 3-tier, multi-theme, CSS + Tailwind + JSON
/layout	Page grid — CSS Grid/Flexbox, container queries, responsive
/wireframe	ASCII wireframes — 2-3 layout options with rationale
/animate	Motion recipes — CSS + Framer Motion, reduced-motion fallbacks
/icon	Icon system — library selection, sizing scale, React wrapper
/dark	Dark mode — oklch luminance mapping, elevation, toggle component
/responsive	Responsive — breakpoints, fluid scaling, block transformations
/onboard	Onboarding — step sequence, permissions, activation metrics
/generate	AI generation — mockups, icons, illustrations via MCP
/remix	Redesign — fix top 5 problems with UX reasoning for each change

Review — evaluate and improve

Command	Output
/grade	Design Quality Score — 0-100, 7 dimensions, badge generation
/audit	Full design audit — heuristics, cognitive load, flow, dark patterns
/roast	Quick critique — 10 dimensions, letter grade, AI slop detection
/before-after	Before/after comparison — visual proof of design transformation
/qa	Design QA — token compliance, state coverage, project-wide consistency
/a11y	Accessibility — WCAG 2.2 AA, ARIA, keyboard, contrast, auto-fix

Plan — research and strategy

Command	Output
/brief	Problem definition — persona, constraints, success criteria
/research	Research plan — interview scripts, surveys, usability tests
/benchmark	Competitive analysis — scorecard vs top 5, gap analysis
/map	Information architecture — sitemap, nav hierarchy, URL structure
/measure	Metrics plan — HEART framework, experimentation strategy
/preflight	Launch checklist — SEO, performance, analytics, legal, monitoring

Utility

Command
/sumi	Show all commands
/next	Suggest what to do next
/status	Show what you've built so far

---

How It Works

Chef Sumi is 42 skill files containing 23,000+ lines of design intelligence, backed by 165 reference documents. Pure markdown. When you run a command, Claude loads the relevant skills automatically.

No API keys. No external services. No dependencies. Works offline.

Design Memory

Run /style once. Every command after that uses your decisions automatically.

/style fintech        ← your design system is saved
/screen dashboard     ← uses your palette, type, tokens
/component card       ← same visual language
/fix                  ← transforms code using YOUR tokens
/roast                ← evaluates against YOUR system

Design memory lives in .sumi/style.json. It auto-detects your project's existing Tailwind config, CSS custom properties, and design tokens — so it works with what you already have.

Context makes it better

/component button                              → works
/component button for fintech iOS app,          → much better
  primary CTA for wire transfers,
  trust-first, audience: professionals 30-55

---

Install

One command:

mkdir -p ~/.claude/plugins && git clone https://github.com/phazurlabs/sumi.git ~/.claude/plugins/sumi

Restart Claude Code. Type /sumi.

Requirements: Claude Code CLI. That's it.

Update:

cd ~/.claude/plugins/sumi && git pull

---

_{v9.0.0 · 34 commands · 42 skills · 165 reference docs · zero dependencies
Built by Phazur Labs}