📊 How-to guide

An ROI calculator that makes commercial conversations faster

The demo is a reactive, single-page ROI calculator — no submit button, live results, business case generation on demand. The approach that makes these work: interview Claude first to define the right value model, then generate the tool from that model.

Sam Tasman-Jones · ~10 min read · Claude Code or Claude.ai + Chart.js

What you're looking at

The demo is a top-of-funnel ROI calculator embedded in a SaaS marketing page. Three sliders, one dropdown, live reactive results — no submit button. As you move the sliders, the stat cards and chart update instantly.

There's a business case generator: hit "Get Business Case" and you get a formatted document pre-filled with the current inputs — ready to share with a manager or a procurement team. There's also a contact form for custom analysis requests.

The reason this works is zero friction. Most ROI calculators require an email gate before you see anything. This shows results immediately — the value is visible before anyone asks for a commitment. The business case document is what you offer in exchange for the email.

What you need

⚡ Option 1 — No code

Generate a custom ROI calculator in Claude

Two prompts run back to back in Claude.ai. The first has Claude interview you to define the right value model for your product. The second takes that model and builds the calculator — self-contained HTML, no code required.
1
Interview Claude to define your value model
Paste this into Claude and answer its questions. It'll ask you one at a time — what your product does, who buys it, what problems it solves, what a prospect already knows without looking anything up. At the end it outputs a structured value model you'll use in step 2.
Step 1 — Interview prompt
I want to build an ROI calculator for my product — something prospects can fill in themselves to see their specific numbers, then generate a business case to share internally. Before we build anything, interview me so we can define the right value model together. Ask me one question at a time. Work through: what my product does and who buys it, what problems it solves and how those show up as measurable costs today, what inputs a prospect would know off the top of their head, and what results would be most convincing to show a CFO or department head. Once you have enough to understand the model, summarise your findings as a structured value model with: - Product summary (1–2 sentences) - 3–5 input sliders: name, range (min/max), sensible default, what it's measuring - 3–4 output metrics: name, what it shows, how it's calculated - The underlying formula: how inputs connect to outputs - Suggested chart: what to compare and what story it tells - What the business case document should include (3–5 sections) Start with your first question now.
💡
The interview usually takes 5–8 questions. Answer honestly — if you don't know a precise number, give a range. Claude will work with it. The output is a structured value model you'll paste into step 2.
2
Generate the calculator from your value model
Once Claude has output the value model summary, paste this follow-up prompt in the same conversation. It uses everything from the interview to build the working calculator.
Step 2 — Generation prompt (run in same conversation)
Using the value model we just defined, build me a self-contained HTML/CSS/JS ROI calculator page. Requirements: - Reactive: results update live as sliders move, no submit button - Sliders and outputs: use exactly the inputs and metrics from the value model - Chart.js bar chart: show the comparison the model specifies - Business case modal: opens on "Get Business Case" click, auto-populates from current slider values, includes the sections we defined, plus a blocked "Export to PDF" button with tooltip "Disabled for demo purposes" - Lead capture: "Get more specific" CTA button opens a simple form — name, company, email, notes — with a success state on submit (no backend needed) - Design: Satoshi font via Fontshare CDN (load non-blocking: media="print" onload="this.media='all'"), white card surfaces, dark pill buttons (#2a2a2a, border-radius 50px), warm gradient mesh background (radial-gradient oranges/pinks at bottom fading to white), #fafafa page background - Self-contained single HTML file — only external dependencies: Fontshare CDN + Chart.js CDN Return the complete file ready to open in a browser.
💡
If the first output doesn't feel right, ask Claude to adjust specific parts: "Make the chart compare quarterly not annual", "The payback period formula needs to account for our $8k/yr licence cost", "Add a conservative/base/optimistic scenario toggle to the chart".
3
Save and share
Claude returns a single HTML file. Copy it, save as roi.html, open in a browser to test. To publish: drag onto Vercel or Netlify Drop — shareable link in under a minute. No build step, no dependencies to install.
⚙️ Option 2 — Start building

Build the full version with Claude Code

The complete version adds: a product tour, scenario table (conservative/base/optimistic), business case modal, and contact form. Run this in Claude Code. If you completed Option 1 already, skip the pre-step and paste your value model directly into the build prompt.
↗
Pre-step: define your value model (skip if you did Option 1)
If you haven't already been through the interview, run this first — either in Claude Code or Claude.ai. Paste the output into the build prompt below.
Value model interview prompt
I want to build an ROI calculator for my product — something prospects can fill in themselves to see their specific numbers, then generate a business case to share internally. Before we build anything, interview me so we can define the right value model together. Ask me one question at a time. Work through: what my product does and who buys it, what problems it solves and how those show up as measurable costs today, what inputs a prospect would know off the top of their head, and what results would be most convincing to show a CFO or department head. Once you have enough to understand the model, summarise your findings as a structured value model with: - Product summary (1–2 sentences) - 3–5 input sliders: name, range (min/max), sensible default, what it's measuring - 3–4 output metrics: name, what it shows, how it's calculated - The underlying formula: how inputs connect to outputs - Suggested chart: what to compare and what story it tells - What the business case document should include (3–5 sections) Start with your first question now.
1
Build prompt — paste your value model at the top
Replace the bracketed section with the value model output from the interview. Claude Code will use it to wire the correct inputs, formula, and chart.
Full build prompt (Claude Code)
Here is the value model for this calculator: [Paste your value model summary here — from the interview above or from Option 1] Build a self-contained HTML ROI calculator based on this model. Single file, no framework. Inputs: use exactly the sliders defined in the value model (correct ranges and defaults) Outputs: the metrics defined in the value model, calculated from the formula Chart: Chart.js — show the comparison the model specifies, quarterly view Scenario toggle: conservative (60%) / base (100%) / optimistic (130%) — switches chart and results Business case modal: — Opens via "Get Business Case" button — Auto-populates from current slider values — Sections: use the business case structure from the value model — Include a scenario table across all three scenarios — Export button with tooltip "Disabled for demo purposes" Contact form modal: — "Get more specific" CTA — fields: name, company, email, notes — Success state on submit (no backend) Design: Satoshi font via Fontshare CDN (load non-blocking: media="print" onload="this.media='all'"), white card surfaces, dark pill buttons (#2a2a2a, border-radius 50px), warm gradient mesh (radial-gradient oranges/pinks at bottom fading to white), #fafafa background. Product tour (5 steps): welcome → first slider → results row → chart → business case button. Spotlight overlay: box-shadow 0 0 0 9999px rgba(0,0,0,0.6). Auto-scroll target into view on each step. Reposition spotlight on window scroll.
2
Fine-tune the model
The generated calculator uses a linear model by default — every unit of input produces the same unit of output. That's a reasonable starting point, but it's worth checking whether it actually fits your product's economics.
If your product has diminishing returns at scale — for example, efficiency gains that plateau as team size grows, or cohort sizes where the marginal benefit per additional user drops off — a linear model will overstate the value at the high end. Tell Claude to adjust the formula accordingly. Similarly, if there are minimum thresholds below which the product doesn't generate meaningful value, those should be baked in.
Beyond the formula itself, check: are the slider ranges realistic for your actual buyers? Does the default pre-population represent a plausible prospect, not a best-case one? Is the payback period calculation accounting for all costs (implementation, training, any offset from tools you're replacing)?
💡
A useful test: run the calculator at the minimum inputs, the maximum inputs, and your most common deal size. If any of those outputs look implausible, that's the formula telling you something needs adjusting.

Going further

Want to build something like this for your team?

I build AI-powered commercial tools for SaaS companies — from quick calculators to full pipeline enablement. Let's talk.

Get in touch → See all demos