A cohesive launch package
Build the system, not just the page
I treated the first calculator as two deliverables at once: the profit margin page itself, and the reusable system underneath it. That meant a 12-section page template, four core components with full Figma specs (text input, slider, toggle, calculator card), and a clear rule for what stays shared and what gets built per calculator. I also set up a Claude prompt generator so any designer, writer, or engineer can spin up a build-ready starting point instead of a blank file. The guide covers the whole path from Figma through content, dev handoff, localization, and release, so the system holds across teams and languages, not just inside my file.
One page, and the machine that makes the next one
The profit margin calculator shipped first, with interactive inputs, a plain-language formula, and a margin versus markup explainer that teaches before asking for anything. About 80% of the page is reusable components, with the remaining 20% tailored to this calculator. That ratio is the point: craft stays high because the shared parts are already solved, and each new calculator only spends effort where it truly differs. The most important decision wasn’t the math, but what happens when the answer is bad news. Most calculators treat a negative result as an error, but that’s when a merchant most needs help, so I designed three finished states: profitable, close, and not-profitable. Each has its own color logic and next step, helping the person understand where they stand and what to do next.
First of many, shipping in days 🎉
The profit margin calculator is live, and it's the first in a series now in production. What used to be a multi-week build is now a few days, because the template, components, and prompts carry the load. The system is the deliverable that keeps paying out. Every calculator after this one is faster and more consistent than the last.