Overview
Most people think building a small web app requires knowing how to code, hosting a website, or paying for a no-code tool. Claude Artifacts removes all of that. You describe what you want in plain English, Claude builds it as a working interactive app inside the chat, and you can use it immediately — or share a link with anyone. In this guide, we'll build a real mini-app from scratch (a trip cost splitter), then iterate on it the way you'd improve any tool: by talking to it. By the end, you'll have a reusable formula for turning everyday problems into custom tools.
Who This Is Useful For
What You Will Build
A working trip cost splitter — a small web app where you enter who paid what during a trip, and it tells everyone how much they owe each other. By the end of the guide, you'll have a live, interactive tool you can use, share with your travel buddies, and reuse for the next trip.
The same exact pattern works for dozens of other ideas, including:
What You Need
Step 1: Understand What an Artifact Actually Is
A normal Claude reply is text. An Artifact is different — it's a working interactive object that opens in a side panel:
Claude decides automatically when an Artifact is the right format. If you ask "build me a tip calculator", you'll get an Artifact. If you ask "what is 20% of 80?", you'll get text.
Step 2: The Prompt Formula That Always Works
After lots of experimenting, here's the prompt structure that produces the best Artifacts on the first try:
Build me a [type of tool] as a working web app.What it should do:
[function 1, in plain English]
[function 2]
[function 3] Inputs I want to enter:
[input 1]
[input 2] Outputs I want to see:
[output 1]
[output 2] Style:
Clean and simple, mobile-friendly
Use [color] as the main color
Show me the result as I type, not after I click a button
The four sections — what / inputs / outputs / style — give Claude enough structure to build something usable, and you can change any of them by just asking.
Step 3: Build Your First App: The Trip Cost Splitter
Open a new chat in Claude and paste this exact prompt:
Build me a trip cost splitter as a working web app.What it should do:
Let me add the names of people on the trip
Let me add expenses one by one (who paid, how much, what for)
Calculate how much each person owes or is owed at the end
Show the simplest list of "who pays whom" to settle up Inputs I want to enter:
Names of trip members (3 to 8 people)
Each expense: who paid, amount in TWD, short description Outputs I want to see:
A running total of all expenses
Each person's net balance (positive = owed money, negative = owes money)
A "settle up" list like "Alice pays Bob $400" Style:
Clean and minimal, mobile-friendly
Use teal as the main color
Show calculations live as I type, no submit button
Claude will think for 10 to 30 seconds, then build the app in the right side panel. Try it: add 3 names, add a few expenses, and watch the math update live.
Step 4: Iterate by Talking to It
This is where Artifacts get magical. You don't edit code — you have a conversation. Try these one at a time:
Each request updates the existing app. Claude shows you what changed and why. If a change breaks something, just say "undo that" or "the export button stopped working — fix it".
Step 5: Save and Share Your App
At the top of the Artifact panel you'll see a Share button. Click it, and Claude generates a public link.
Anyone with the link can open the app in their browser. They don't need a Claude account. The link works on phones, laptops, anywhere.
Share the trip splitter with your travel group on LINE or WhatsApp. They can use it without logging in. When the trip ends, everyone sees the same settle-up list.
Step 6: Reuse the Pattern for Anything
The trip splitter is one example. Here are 5 prompts you can paste into Claude right now to build other useful mini-apps:
Build me a recipe scaler as a working web app. Let me paste in
a recipe written for X servings, then enter a target number of
servings, and show me the scaled-up ingredient list with proper
units. Style: warm, food-magazine vibe.
Build me a workout streak tracker. Let me check off "did workout
today" each day. Show me the current streak, the longest streak,
and a calendar heatmap of the last 90 days. Add an export feature
since you can't save data automatically.
Build me a loan calculator for a Taiwan mortgage. Inputs: total
loan amount in TWD, interest rate, loan term in years. Outputs:
monthly payment, total interest paid, full amortization schedule
table. Style: clean and serious.
Build me a wedding seating chart tool. Let me enter guest names
and number of tables. Drag and drop guests onto tables. Show a
warning if I exceed table capacity. Add an export button.
Build me a tip calculator that handles Taiwan tax (5% added) and
optional service charge (10%). Let me split the bill among any
number of people, including handling people who didn't drink
alcohol. Style: minimal, clear typography.
Each of these takes 30 seconds to ask and a few iterations to polish.
Going Further
Build a tool you wish existed. Spend 10 minutes thinking about a calculation, list, or simple decision you make repeatedly. Build it as an Artifact. Even if it only saves you 30 seconds each time, you'll use it for years.
Combine Artifacts with Projects. Inside a Project, your Artifacts gather over time. After a few months, you have a personal collection of tools — your own little app suite, custom-fit to your life.
Hand off to someone else. If you build something useful for a family member or friend, share the Artifact link directly. They can use it without ever knowing it was made with AI.
Key Takeaways
Here's what you learned in this guide:
The first Artifact you build is the hardest because it feels too simple. The second one will take you 5 minutes. By the tenth, building a custom tool will feel as natural as opening a calculator app.