Verified against Claude · 2026-08-02
Build a working interactive tool in a Claude Artifact in one prompt
A single prompt that produces a self-contained, live-rendered interactive tool (a calculator, converter, or small utility) as a Claude Artifact, with inputs, live outputs, and no external dependencies.
The prompt
Ready to copy — highlighted parts are example details you can swap.
Build this as a single self-contained Artifact — one React component or one HTML file, no external libraries beyond what is already available in the Artifact environment, no network calls. TOOL A freelance day-rate calculator that shows an hourly, daily and project rate side by side. INPUTS Annual income target (number), billable days per year (number, default 220), overhead percentage (number, default 20) CALCULATION OR LOGIC day_rate = (annual_income_target * (1 + overhead_percent/100)) / billable_days; hourly_rate = day_rate / 8 OUTPUT DISPLAY Three cards: Hourly Rate, Day Rate, Rate for a 5-day project, each rounded to the nearest whole currency unit. REQUIREMENTS - Every input must update the output live, with no submit button, unless the calculation genuinely requires an explicit trigger — state which if so. - Handle invalid or empty input without crashing: show a plain inline message, never a blank screen or a console error. - Keep the visual design clean and readable at both mobile and desktop widths — this will be viewed in a side panel that can be narrow. - Do not fabricate a data source or claim live data if the tool is a pure calculator; be explicit in the UI that this is calculated from the numbers entered. - After building it, state in one sentence what you did not implement, if anything from the brief above was cut, rather than silently shipping less than asked.
Customize the highlighted detailsoptional — the prompt above already works
Why this works
Claude Artifacts render code live in a side canvas the moment it is produced, so a prompt that front-loads every constraint the renderer will actually enforce — self-contained, no network calls, works at mobile width — prevents a second round of fixing after the fact, which is the realistic failure mode of a vaguer build me a calculator ask. Separating inputs, logic and output display into named sections matters specifically for calculator-shaped tools because the single most common Artifact bug is a formula that's subtly wrong but plausible-looking; stating the exact formula in the logic field removes the guess Claude would otherwise have to make about what day_rate actually means. The instruction to handle invalid input without crashing targets a real Artifact failure mode: a live-updating input bound directly to a calculation throws on an empty or non-numeric field the instant a user starts typing, before they finish, so this has to be handled from the first draft rather than patched in after someone notices a blank canvas. The closing self-report line exploits the fact that a model given a long requirements list will sometimes silently satisfice on one item rather than flag it, and asking for the omission explicitly is cheaper than discovering it by testing the tool yourself.
What you get back
A live Artifact with three number inputs (annual income target, billable days, overhead %) and three result cards that recalculate on every keystroke, plus a small note: "Not implemented: currency selection — rates are shown as plain numbers with no currency symbol since none was specified."
Verified against
Claude Sonnet 4.6 (Artifacts) · 2026-08-02
Changelog
- 2026-08-02 — Initial publish, verified against Claude Sonnet 4.6 Artifacts.
Building this for real?
This is a free starting point. If you'd rather have what Scult builds built and running for your business, that's Scult's day job.
EXPLORE WHAT SCULT BUILDS
