A wizard-to-dashboard pipeline that generates palettes, typography pairings, component configs, and a ready-to-use agent prompt — all from brand inputs. Stripe-gated export turns it into a real product.
Building a design system from scratch requires specialized knowledge — color theory, typography pairing, component architecture, accessibility standards. Most startups and small teams skip this entirely or end up with inconsistent, hard-to-maintain visual systems.
Even with AI tools, the output is fragmented — a palette here, a font suggestion there. There's no unified pipeline that goes from brand inputs to a complete, implementable design system.
Most developer tools are features. Brand Builder is a product loop — each step feeds the next, and the paywall sits at the point of maximum perceived value.
Guided input collection: brand name, industry, values, color preferences, personality traits. Structured with Zod validation.
Anthropic SDK generates a complete DesignSystem object — palette with semantic tokens, typography scale, component configurations, spacing system.
Live component playground with palette swapping. Users see their design system applied to real UI components before paying — building confidence in the output.
One-time payment (not subscription) gates the export. localStorage persists state across the Stripe redirect — no server-side session needed.
Full design system export plus a generated prompt that instructs Claude Code or Cursor to implement the system. The most original feature.
Brand Builder doesn't just generate a design system — it generates the instructions to implement it. The Agent Prompt feature produces a structured prompt that tells Claude Code or Cursor exactly how to apply every token, every component config, every spacing rule. This turns a static export into an actionable implementation blueprint.
A design system is a one-time deliverable, not an ongoing service. Subscription would create churn pressure that doesn't match the product's value delivery pattern.
After Stripe redirect, the app needs to know what was purchased. localStorage persistence avoids server-side session complexity — pragmatic for a solo-built product.
A single, deeply typed object holds the entire system — palette, typography, components, spacing. This makes AI generation reliable and export straightforward.
The wizard-to-paywall-to-dashboard flow is a product pattern, not just a UI pattern. Each step builds perceived value before asking for payment.
Stripe's redirect flow is simple in theory, complex in practice. localStorage state persistence was the pragmatic solution over server sessions.
Generating a deeply typed DesignSystem object from AI requires careful prompt engineering and Zod validation. The AI is creative; the schema is strict.
The live component playground with palette swapping isn't technically complex — but it's the feature that makes users trust the output enough to pay.