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
