This Claude artifacts tutorial gives you the short answer first. Ask Claude for a tool, not an answer. For example: “Make an interactive price calculator for web projects.” Claude builds it and opens it in its own panel beside the chat. You change it by sending another message, you find it later in the Artifacts tab in the sidebar, and you share it from the Share button with one link. No code, no hosting, no setup.
Watch the video:
This is Episode 3 of Mastering Claude & Claude Code, my free 12-episode course. In Episode 1 you learned the 3-part prompt. In Episode 2 you used Projects to give Claude your files and rules once. Today Claude builds things you can click.
I checked every step against Anthropic’s help center on 11 November 2026. Claude’s screens change often, so yours may look slightly different.
What is a Claude artifact?
An artifact is anything Claude makes for you that you would put in front of someone: a document, a dashboard, or a small interactive tool. It opens in its own window beside your chat, so the chat stays readable while the tool grows.
Claude makes an artifact when the result:
- is big (usually more than about 15 lines),
- stands on its own without the chat around it, and
- is something you will reuse or edit.
If you want one for sure, add “make it an artifact” to your message.
Everything you make is saved in the Artifacts tab in the sidebar, so you can open it again from any chat. From there you can also start from a template, such as Docs, Slides or Design.
Before you start: one setting
Artifacts need one capability turned on. Go to Settings > Capabilities and turn on Create and edit files. If it is off, Claude answers in plain text and no panel opens.
Tool 1: A project price calculator
I price web projects every week at mouhimen.dev, so this is a tool I actually use. Open a new chat and type:
Make an interactive price calculator for web projects. Inputs: hours, hourly rate, and a rush job switch that adds 25%. Show the total, and a short quote I can copy.
Claude writes it and the panel opens on the right. Type 40 hours and $35 an hour, and the total shows $1,400. Switch rush on and it jumps to $1,750, live, as you type. The Copy quote button gives you a short quote to paste into an email.
Give it a button that uses Claude
Artifacts can call Claude themselves. I asked for one more button: “Write quote email”, which turns the numbers into a friendly email. You don’t need an API key. When other people use the artifact, it counts against their own Claude plan, not yours.
Change it with a message
Editing is just another message:
Make the buttons orange and put mouhimen.dev at the top.
The artifact updates and the math still works. Keep reading for the one sentence that keeps it that way.
Tool 2: An IT onboarding checklist that remembers
New hire on Monday? Ask:
Build an IT onboarding checklist for a new employee, with four sections: accounts, laptop, security, and day one. Add a progress bar, and save my ticks, so they’re still there tomorrow.
My test hire was Abd almouhimen Shamout. The checklist had items like “Create the Active Directory account”, “Assign the Microsoft 365 license”, “Encrypt the laptop (BitLocker)” and “Turn on MFA”. Tick four of the eight boxes and the bar shows 50%.
Because the prompt says “save my ticks”, Claude stores them inside the artifact. Close it, open it again, and the ticks are still there. Each person who uses it gets their own private ticks, unless you ask for shared data.
Try a new direction without losing this one
Want a different layout but keep the working version? Edit your earlier message instead of sending a new one. Claude creates a new version of the chat with its own artifact, and the first version stays safe.
Tool 3: A help desk dashboard from a CSV file
This one uses your own data. Click the + button in the chat box, attach a CSV export of your tickets, and type:
Make a dashboard from this file. Tickets per week, top categories, average time to close, and a filter by priority.
In my demo file (sample data), Claude found 86 tickets, an average of 6.4 hours to close, and password resets as the top category. It drew a bar for each week, a ring chart for the categories, and a priority filter. Pick “High priority” and every number updates.
My advice from real client reports: check one number by hand before you send a dashboard to anyone. I counted the rows in the file: 86. It matched, so I could trust the rest.
Share an artifact with one link
- Open the artifact and click Share at the top.
- Under Who has access, choose Anyone with the link.
- Click Copy link and send it.
Most link-shared artifacts open without a Claude account, so a client can open your calculator on their phone. To give access to one person only, type their email in the Share menu and pick Can view, Commenter or Can edit.
To stop sharing, open Share again and choose Only you. People with only the link can’t open it anymore.
The same rule works the other way: only open shared artifacts from people you trust, just like a file from an unknown sender.
Plan limits you should know
- Artifacts work on every plan, including Free.
- Sharing with a public link needs Pro, Max, Ultra, Team or Enterprise. On Team and Enterprise, an owner must turn on external sharing first.
- Saving data inside an artifact (like the checklist ticks) and connected apps need Pro or higher. Stored data is text only, up to 20 MB per artifact.
- Artifacts made before 16 September 2026 may show Publish instead of Share.
3 errors and how to fix them
1. You ask for a tool, but no artifact opens.
Go to Settings > Capabilities and turn on Create and edit files, then send your message again. Adding “make it an artifact” also helps.
2. The artifact shows an error or a blank panel.
Click Try fixing with Claude. It sends the error to Claude and Claude repairs the code. If it still fails, describe exactly what you clicked and what you expected, for example: “I clicked Rush. I expected +25%, but the total shows NaN.”
3. The shared link opens, but the saved data is missing.
People who aren’t signed in to Claude can’t see what an artifact stores, and parts that use Claude or connected apps don’t work for them. Ask them to sign in, or keep the data inside the tool itself, like the calculator does.
The one sentence that stops Claude breaking a working tool
When a tool already works, a vague message like “make it better” lets Claude rebuild the whole thing, and the parts that worked can break. Write this instead:
Change only the color of the buttons, and keep everything else exactly the same.
Make one change per message and name the part you mean. In my own work, this sentence saves me more re-dos than any other prompt trick.
FAQ
Are Claude artifacts free?
Yes, you can create artifacts on the Free plan. Sharing with a public link, saving data inside an artifact and connected apps need a paid plan (Pro or higher).
Do people need a Claude account to open my artifact?
For most artifacts, no. They can open the link without signing in. But they won’t see stored data, and parts that use Claude or connected apps only work when they sign in.
Where are my Claude artifacts saved?
In the Artifacts tab in the sidebar. Everything you make is listed there, so you can open it from any chat.
Can I turn a shared artifact private again?
Yes. Open Share, set Who has access to Only you, and the link stops giving access.
Do I need to know how to code?
No. Every tool in this tutorial was built and edited with plain English messages. If you are a developer, you can still ask Claude to show or explain the code.
Keep learning
- Previous episode: Claude Projects Tutorial
- Start of the course: Claude AI Tutorial for Beginners
- Want to build real web apps next? Next.js Tutorial for Beginners
- Next episode (Wed 18 Nov): Prompt Engineering for Beginners, the four parts that get you better answers from Claude.
Which tool would you build first? And which topic do you want a video about next? Tell me in the comments on YouTube.
Leave a Reply