vibe-coding / design-system-waste-calculator

Design System Waste Calculator

A five minute calculator that puts a figure, in euros, on what a company loses without a design system.

5-minute-design-system-waste-calculator.toriids.com

5 minutes to a number36 files0 servers to maintain
Design System Waste Calculator — Five minutes to find out what not having a design system is costing you.

Context

A five minute calculator that puts a figure on what a company loses by not having a design system. Its own promise: Find out how much design waste. A stepped questionnaire, a result in euros, and then three plays to fix it fast. Contact details are asked for at the end, once the number has already done the convincing.

The workflow

Designed and built in code, with AI as the build partner. No design file, no specification, no handover between design and development. Logic, interface and deployment were built as one flow and shipped to the network edge on Cloudflare Workers, with no server to keep alive.

What changed

  • Design and development were the same step.
  • No backend team and no environment to set up: the calculation and the screens were built by the same hands.
  • The only one of the nine built without another project running alongside it. Four days meant four days.

Result

Calculator, result page and contact flow in production.

4 days of effort across 4 active days. 27 commits.

What shipped

  • The full tool, responsive, deployed on Cloudflare Workers.
  • A stepped questionnaire with the result calculated in euros.
  • Three plays to fix it fast, shown after the result.
  • The contact form placed after the figure, so the tool earns the details rather than gating on them.

Stack

  • Next.js + TypeScript
  • Tailwind CSS
  • Radix UI
  • Zod — validation
  • 36 files

Integrations

  • Cloudflare Workers
  • Wrangler

Infrastructure

  • Cloudflare Pages
  • Cloudflare Workers
  • GitHub
  • No origin server