StratumPricing Table Generator

Stratum lets you design a pricing table by filling in your tiers and features, then hands you finished code to paste into your site. You get the monthly and annual toggle, the "most popular" badge, and the feature comparison without writing any markup. Packaging an offer is a business decision, and I wanted a tool where I think about the offer and get shippable code as a side effect.

Money here uses Number.EPSILON rounding, not the integer approach #18 used. That's fine for display prices but it's the looser of the two. There's no undo. The XSS protection is proven by string-level tests, not a security review. Tested with automated checks, not real storefronts.

Built on the bulk one-shot night by Claude Code, about 0.45 hours, from the shared brief. I set the scope: tiers as the unit of the offer, three feature states (included, limited, not included), five export targets, and one hard rule: the preview has to be the real export, not a mock.

Claude Code wrote the core (pricing.js), the exporters, and the UI in one pass. The exports are standalone HTML, Tailwind HTML, React JSX, a JSON config, and schema.org JSON-LD. On top of the 156 Node tests, it built a 37-check browser smoke page that drives the real app through an iframe.

The session got interrupted near the end. A second Claude Code session picked it up from the files alone and found one red smoke check: "delete opens a neighbor tier." The bug was in the check, not the app. It read .length off a querySelector result, which returns one element, not a list. Fixed the check, 37 of 37 green, then it wrote the docs. I reviewed the screenshots and the exported code.

• Generating code from user input means escaping per target, not once. The same tier name needed HTML text escaping, attribute escaping, JSX escaping with braces neutralized, and JS string escaping inside the React export. One shared escapeHtml isn't enough, and the XSS tests proved each path.
• Making the preview iframe render the actual exportHtml() output means a preview bug and an export bug are the same bug, caught once.
• The "save N%" label has to come from the rounded annual total, not the discount input, or a per-tier override makes the label lie.
• A comparison grid is a derived view, not a second data model. Taking the union of feature names across tiers keeps one source of truth.
• An iframe srcdoc preview gives free style isolation, so the dark app can show a light pricing table with no leakage.

It used the tested-core pattern and the brief's serve.mjs (port 5119, with a shutdown route). #20, the FAQ generator, was built the same night by a separate agent and ran into the same escaping problem across its own five export flavors. Two builders landing on the same lesson independently tells me it's the real lesson of code generators. And it's one of four builds here (#16, #18, #19, #20) finished by a fresh session reading the folder, which only works because each folder is self-contained.

I'd add undo and redo on the config and a side-by-side view of two saved designs, since comparing two ways to package the same offer is the real decision this tool supports.