Why this matters
Every office answers the same question over and over: what will it cost? Each answer means finding the price list, doing the math and typing it out, and two people can give a customer two different numbers.
Claude can build a small working tool from a plain description. It opens as an artifact in a panel beside the chat: a page you can click, test and share, with no code to write.
In this module you ask Claude for a price calculator, test it and check the math, ask for one change, share it with a link and find it again later.
What you’ll build
For Bright Path Landscaping, a made-up landscaping company: a lawn price calculator. Enter a lawn size, pick a service, and it shows the price. All prices are sample prices, so you can check every number.
You add one feature in the same chat (a number of visits, with a discount), share the calculator with a link, and find it again in Artifacts.
What you need
- Nothing to start the practiceClaude is a practice copy. Nothing is shared or published.
- A Claude account, to do it for realclaude.ai. Artifacts work on every plan, including Free. Turn on Code execution and file creation in Settings, Capabilities.
- Your real pricesThe services you sell and what each one costs. Put them in and test the result yourself before a customer sees it.
Concepts
3 ideas you’ll use in the practice.
Describe what it should do, not how
Say what goes in (lawn size, service), what comes out (the price) and the rules (each service’s price per square foot, a minimum charge). Claude does the building.
Give the real numbers in the request. A calculator built on made-up prices looks just as convincing as a correct one.
Test it like a customer would
Try two or three inputs you can work out in your head. If the math is off, say which input gave which wrong number, in the same chat.
Ask for one change at a time ("add a number of visits, 10% off for 4 or more"), then test it again. Small changes are easy to check.
Share it, and know who can see it
Artifacts start private. Share opens the access choices, and a link lets people open it. Viewers may need a Claude account; Anthropic’s help center has the current rules for each plan.
Everything you make is saved under Artifacts in the sidebar, so you can find it, change it and share it again later.
Practice
Do every step yourself in a practice copy of the real tool. It checks your work, and “Do it for me” finishes any step you get stuck on.
Do it for real
Now repeat it in your own account. Tick each step as you go.
Quick check
3 questions to check you’ve got it.
1. What should a calculator request include?
- Just "make a price calculator"
- The inputs, your real prices and the rules
- The programming language to use
Show the answer
The inputs, your real prices and the rules. Claude builds what you describe. Real prices and rules give you a tool you can actually use.
2. How do you know the calculator is right?
- It looks professional
- Test inputs you can work out by hand and compare
- Claude says it is correct
Show the answer
Test inputs you can work out by hand and compare. A polished page can still do the math wrong. A few hand-checked inputs catch it.
3. Who can see an artifact you just made?
- Anyone on the internet
- Only you, until you share it
- Everyone in your company
Show the answer
Only you, until you share it. Artifacts start private. You choose who gets access when you share.
JavaScript: An Instant Quote Calculator for Your Website
Next: the same kind of calculator typed in JavaScript, a few lines at a time, so you can paste it into your own website.
Start module 6 →