How to build a tracker or calculator with Claude artifacts

If you search for how to build a tracker or calculator with Claude artifacts, most of what comes back is a one-line prompt and a screenshot of whatever came out. That gets you a demo, not a tool a team can use. Artifacts now work across conversations and are saved to the Artifacts tab in your sidebar (release notes; What are artifacts). A page other people open every day has to be right, and it has to stay right while you change it.

This post covers the whole loop without code: a four-part brief, a way to test and iterate, the sandbox rules that decide what a page can do, and how to share and update a tool safely. The worked example is a calculator for Kettle & Kite, a fictional tea shop. If you're still deciding whether you need a page at all rather than a doc or a deck, start with how to use Claude artifacts.

Write a four-part brief

Anthropic's help center lists "a dashboard, or a small interactive tool" among the things an artifact can be, and says you get one by asking in any conversation (What are artifacts). A one-line request gets you a page. To get the page you need, answer the questions Claude would otherwise guess at. We use four parts. This is our own structure, not an Anthropic rule:

1. Purpose. The job, in one sentence someone could act on.
2. Data. The actual items and fields. Leave them out and Claude invents placeholders.
3. Controls. Each button, filter, input or slider, and what it does. A control you don't name usually won't be there.
4. Users. Who opens it and on what device. "On a phone at the till" leads to a different layout than "on a laptop once a week."

Worked example: a tin order calculator

Here is the brief Mara, the (fictional) shop owner, sends:

Build an interactive page: "K&K Tin Order Calculator" for Kettle & Kite,
a small tea shop.

PURPOSE: so staff can quote a customer's tin order total at the counter
without a spreadsheet.

DATA (put it in the page): 100g tin 12.50, 250g tin 27.00.
Orders of 10 or more tins get 10% off the subtotal.

CONTROLS: a tin-size picker (100g / 250g), a quantity box, and a live
breakdown: subtotal, discount line (only when it applies), total.

USERS: three staff, mostly on a phone behind the counter. Big tap
targets, large total. Add a small "Demo prices" note at the bottom.

Every number in that brief can be checked by hand.

Test it like a user, then change one thing at a time

Claude's reply says what it meant to build. The page shows what it built. Use every control before you trust it:

• Use known answers. 12 x 100g tins: 150.00 subtotal, minus 15.00, total 135.00. 9 tins: 112.50 and no discount line.
• Hit the edges. Exactly 10 tins should get the discount. Try 0, an empty box, and a negative number.
• Switch every option. 250g x 10 should come to 243.00.
• Make the window narrow to see roughly what a phone gets.

When something fails, send one fix per message and write it as expected vs actual: "At 10 tins, expected 10% off; actual: no discount until 11. Fix only the discount threshold and keep everything else the same." Claude can read images (Vision docs), so attach a screenshot of the wrong state. If the page shows an error instead, look for Try fixing with Claude, which Anthropic notes doesn't always work: "success isn't guaranteed" (What are artifacts). After any fix, run the whole check again. A new fix can break something that already worked.

Know the sandbox before you ask

Some requests fail because of the page's security rules. The most detailed public description is the Page constraints section of Anthropic's Claude Code docs. It covers pages published to claude.ai from Claude Code, so the web app may differ in places. Per those docs:

The pattern: anything the page can do with what it carries works. Anything that has to reach out needs a workaround.

Share it with the right role

Artifacts "start private to you" (What are artifacts). The Share artifacts article defines three access levels: Can view, Commenter (adds comments and file downloads), and Can edit. On Pro and Max, "Who has access" is "Only you" or "Anyone with the link." Team and Enterprise add invite-only and organization-wide options. Everyone who opens a shared artifact needs a Claude account.

Two rules from the same article matter for tools. Artifacts that connect to your apps or use Claude can't be shared with "Anyone with the link." And if an artifact is shared with anyone with the link, the people you invited can no longer comment, whatever role you gave them. For a team tool, keep it invite-only and give teammates Commenter, so they flag problems and you make the fixes.

Update it without breaking it

Once people rely on a tool, an update is a change to something they're using. In Cowork, Anthropic documents that "each change saves a new version," with history and restore, and that "a link to a specific version always shows that version" until you share the latest (Use artifacts in Claude Cowork). To keep working in a new conversation, paste the artifact's link (same source). The Claude Code docs warn that without the link, a new session creates a new artifact instead of updating the old one (Update an artifact).

Our routine, which is course advice and not from Anthropic:

1. Tell people what's changing.
2. Note the known-good version, and pin the shared link to it if you can.
3. Make one change.
4. Re-run your known-answer checks.
5. Add a dated changelog line at the bottom of the page, such as "Updated 5 Oct: 250g price now 28.00."
6. Release it, open the shared link as a viewer would, then announce it.

The changelog line lets a viewer confirm which version they have.

Learn it hands-on

Build Interactive Tools with Claude Artifacts is an eight-lesson, no-code course that takes about four hours. It has a quick start for anyone new to artifacts, three lessons on custom pages (the brief and test loop, the sandbox, and design with dark mode and a phone layout), and two on working with others (roles, comments and public links, and updating a tool people are using). The capstone ships the Autumn Ember Launch Tracker for the same fictional tea shop. It has filters, a progress bar, a countdown and a phone layout, it's shared with a teammate as a Commenter, and it's checked against a 23-item acceptance checklist.

Each lesson cites Anthropic's documentation and ends with a practice task you run in Claude. The sharing lessons need a Pro plan or higher.