DesignSetGo apps
How it works Examples Docs Pricing Blog WP Blocks Install free

Blog /

A fitness coach’s TDEE calculator, vibe-coded in 20 minutes

By Nealey

If you coach fitness for a living and you have a WordPress site, you have probably searched for “WordPress TDEE calculator.” There are three or four plugins that show up. They all work. They all also have the same three problems: someone else’s branding, someone else’s input vocabulary (cm vs inches, kg vs lbs, “activity level” labeled in someone else’s words), and someone else’s CTA at the bottom (often a link to their tool, not yours).

A custom TDEE calculator used to be a “hire a developer for a week” job. It is now a 20-minute job, and the result is yours. Your colors, your wording, your CTA, your funnel.

This post walks the whole thing. Skim it in three minutes; if you have a coaching site, follow it for the other 17.

What TDEE is, in case you want the math right

Total Daily Energy Expenditure. The number of calories a body burns in a day. Used by trainers as the baseline against which you set a deficit (for weight loss) or a surplus (for muscle gain).

The most common formula is Mifflin-St Jeor for BMR, multiplied by an activity factor:

BMR (men)   = 10 * weight_kg + 6.25 * height_cm - 5 * age + 5
BMR (women) = 10 * weight_kg + 6.25 * height_cm - 5 * age - 161
TDEE        = BMR * activity_factor

Activity factors:

  • Sedentary (little/no exercise): 1.2
  • Lightly active (1-3 days/week): 1.375
  • Moderately active (3-5 days/week): 1.55
  • Very active (6-7 days/week): 1.725
  • Athlete (2x daily): 1.9

If you want a different formula (Katch-McArdle if the user knows their body fat, Harris-Benedict if you prefer the older standard), swap it in. The runtime does not care.

Step 1: scaffold the app

npx designsetgo apps init tdee-calc
cd tdee-calc

Open the folder in Claude Code or Cursor. The starter ships a CLAUDE.md so the agent already knows about the bridge and the manifest.

Prompt:

Build a TDEE calculator. Inputs: sex (radio: male/female), age (number, 16-90), height (input with cm/in toggle), weight (input with kg/lb toggle), activity level (radio with 5 options: sedentary, lightly active, moderately active, very active, athlete). Show the calculated TDEE in large text. Below it, three derived targets: weight loss (-500 cal), maintenance (TDEE), muscle gain (+300 cal). Use Mifflin-St Jeor for BMR. Style it to look like a modern fitness coaching site: dark background, accent color #FF6B35, big readable numbers, mobile-first. Below the results, a CTA section: “Want a personalized plan? Book a free consult.” linking to /book.

Claude Code writes the bundle. Roughly 80 lines of HTML + JavaScript + a stylesheet. The math is straightforward; the UI takes most of the lines.

Step 2: the manifest

{
  "manifest_version": 1,
  "id": "tdee-calc",
  "name": "TDEE Calculator",
  "version": "0.1.0",
  "entry": "index.html",
  "display": { "modes": ["block", "page"], "default": "block" },
  "permissions": { "read": [], "write": [] },
  "runtime": { "sandbox": "strict", "external_origins": [] }
}

Nothing in permissions.read. The calculator does not read WordPress data; it just does math on the inputs. The bridge is still loaded (it always is), but there is nothing to ask for.

If you want to save the calculated TDEE for logged-in users (so they can come back and see it later, or so you can email them about it), add permissions.read: ["user"] and use dsgo.storage.user.set('tdee_result', { tdee, target }). The per-app, per-user storage post walks that pattern in detail.

Step 3: deploy

npx designsetgo apps deploy

App live at /apps/tdee-calc/.

Step 4: drop it into the right page

Open the page on your coaching site where TDEE comes up. Probably your “Start Here” page, or your “Online Coaching” service page, or a blog post about cutting/bulking. Click the + in the Gutenberg editor. Search for “TDEE.” Your calculator shows up. Click it. The calculator renders inline.

Save the page. Visit it. The calculator is part of the page, in your colors, with your CTA, surrounded by your own copy that frames it. The visitor types in their numbers, sees their TDEE, sees the three target numbers, sees your CTA, clicks the CTA.

That is the entire funnel: page → calculator → result → CTA. No external SaaS, no third-party branding, no “calculator powered by SomeOtherFitnessSite.com” footer line eating your conversion.

What this beats

Three named alternatives, by category.

Generic WordPress TDEE plugins. The free ones embed someone else’s branding. The paid ones cost $30-$60 and still feel like a generic widget. None of them let you change the input vocabulary or the CTA structure without overriding their CSS.

Iframed external calculators (tdeecalculator.net embedded in a page). Free, works, gives the third party your traffic and ad impressions. The visitor sees an external domain in any tooltip. Your branding is gone.

Calculated Fields Form (covered in detail last week). Works, but the UI is form-shaped, not the interactive numeric experience a TDEE calculator should be. The CTA layout is constrained by what CFF supports inside a form.

What you get from the DesignSetGo version that none of them offer:

  • Inputs labeled in your own voice (“How many days a week do you train hard?” rather than “Activity level”).
  • A visual breakdown sized to your design system.
  • The ability to integrate with your booking flow: pre-fill the consult form with the calculated TDEE.
  • One bundle to maintain, no third-party plugin author to depend on.

The optional upgrades

Once you have the calculator working, three small additions take it from “useful” to “actually drives bookings.”

Save the result for the user. Add permissions.read: ["user"]. Call dsgo.storage.user.set('tdee', result) after calculating. When a logged-in user comes back, pre-fill the form with their saved values and show their previous result above the calculator. Returning visitors love this; new ones do not see it.

Pre-fill the booking form. When the user clicks “Book a free consult,” append the TDEE and goal as URL parameters to your booking page. The consult form can read those and display them in the booking confirmation: “Coach, this person has a TDEE of 2,400 and is goal-cutting.” Your conversion conversation starts in a different place.

Pair it with the AI bridge. If you have a Connector set up on the site, use dsgo.ai.prompt() to generate a 3-line personalized response under the calculator: “At a 500-calorie deficit, you would lose about a pound a week. That is a moderate pace and sustainable; here are three things to track…” The AI response is generated server-side, free for the user, and it makes the calculator feel like the start of a coaching conversation rather than a button-press.

The optional upgrades take another 15 to 30 minutes each. Bundle them after the basic version is in production for a couple of weeks and you have a sense of where visitors drop off.

Where this goes

A complete fitness coaching site eventually has half a dozen calculators. TDEE is the wedge. The others: a one-rep-max calculator, a macro-split planner, a body-fat percentage estimator from measurements, a hydration calculator, a deload-week scheduler. Each one is the same pattern: scaffold, prompt, deploy, embed.

The deeper version is a fitness vertical pack: all six calculators as one bundle, installable in one click, configurable per-coach. That is the agency play. The wedge is shipping the TDEE one this afternoon.

Further reading

Keep reading

More from the blog.