2026 · solo build · 4 weeks
Design systems,
made with love.
Mochi is a design-system generator. One prompt, one complete production-grade system — coded tokens, React + Vue components, and a Figma file you can actually use. Every palette is perceptually uniform, nothing is shadcn-default.
The opinion
AI-built apps all look the same because the tokens are an afterthought.
I work in Claude Code every day. My own projects felt intentional because I set design guidelines before prompting. Everyone else's AI-built apps kept looking the same — generic, shadcn-default, no soul. Mochi is the tool I wanted: one prompt, one design system you can actually ship with.
Six tokens done right beat fifty that nobody uses. And Claude writes its best code when you've already decided the shape of the output before you prompt.
Live · the real OKLCH engine
One seed. Eleven steps. Every step perceptually equidistant.
Ported from src/lib/tokens/colorGeneration.ts
Seed
primary
secondary
-40% chroma
accent
+15° hue · +15% chroma
Brand, CTA, interactive
Subtle backgrounds, cards, dividers
Links, focus, highlights
Real products don't use derived secondaries via hue rotation. They use one brand color plus tonal variants. Mochi bakes that opinion into the math — secondary drops chroma 40%, accent shifts hue 15° and boosts chroma 15%. You get one cohesive family, not a rainbow.
Live · components use the generated scale
The same scale ships React, Vue, and Figma.
Matcha system
A generated design system. Tokens, components, and a Figma file in one prompt — all sharing the same scale.
Ship · what Mochi actually outputs
Your tokens, in whatever format your stack speaks.
:root {
--primary-50: #dfffe9;
--primary-100: #c7f5d7;
--primary-200: #a1e7ba;
--primary-300: #8bd0a4;
--primary-400: #53b57d;
--primary-500: #379c65;
--primary-600: #0c804c;
--primary-700: #006633;
--primary-800: #004c1b;
--primary-900: #003001;
--primary-950: #001800;
--secondary-50: #ebf9f0;
--secondary-100: #daeee0;
--secondary-200: #bfddc9;
--secondary-300: #a9c6b2;
--secondary-400: #83a990;
--secondary-500: #6b9178;
--secondary-600: #51765e;
--secondary-700: #385c45;
--secondary-800: #1f432e;
--secondary-900: #042915;
--secondary-950: #001305;
--accent-50: #d7fff0;
--accent-100: #bbf7e1;
--accent-200: #8ceac9;
--accent-300: #75d3b3;
--accent-400: #14b991;
--accent-500: #009f79;
--accent-600: #00845f;
--accent-700: #006946;
--accent-800: #004e2e;
--accent-900: #003316;
--accent-950: #001905;
}Under the hood
Next.js 16
App Router, server components, edge-ready
TypeScript
Strict, no any, zod-validated AI output
culori
OKLCH math — perceptually uniform scales
Tailwind
Emitted tokens ship directly into config
Claude Code
Entire build, from empty repo to production
Figma API
One-click sync of tokens + components
What it taught me
OKLCH is worth the pain.
RGB and HSL scales feel muddy at the edges. OKLCH makes every step equally loud — designers stop hand-tweaking and ship.
Six tokens > fifty.
Primary, secondary, accent, neutral, semantic set. If a variable isn't earning its keep, it dies. Systems used are systems loved.
Decide the output before you prompt.
Claude writes its best code when the shape is fixed. Schemas, zod, types — whole categories of errors never happen.