There is a category of tools that most professionals need but never build: the custom calculator that matches exactly how their business prices work, the project tracker organized precisely for their workflow, the interactive reference tool their team uses daily. These things exist in the space between “I wish I had a tool that…” and “I’d need a developer for that.”
Claude Artifacts closes that gap.
Artifacts are fully functional interactive applications — built with real code — that Claude generates directly inside your conversation. You describe what you want, Claude builds it, and you can use, share, and iterate on it immediately. No development environment, no deployment, no waiting for a developer.
The range of what Artifacts can be is surprisingly broad: interactive calculators, live dashboards, form interfaces, games, data visualizers, reference tools, productivity trackers, learning tools. Anything that can be built as a standalone web application can potentially be built as an Artifact.
This guide covers every Artifact type, how to prompt for them effectively, ten real-world Artifact projects with detailed prompts, the persistent storage system that makes Artifacts stateful across sessions, and where Artifacts reach their limits.
🔗 This is Post #7 in the Claude Unlocked series. For writing and editing work within Claude, see Claude for Writing. For code-level development beyond Artifacts, see Claude for Coding. Artifacts are the bridge between “I need a tool” and “I need a developer” — this post shows exactly where that bridge is.
What Are Claude Artifacts?
When you ask Claude a question, the response appears in the conversation as text. An Artifact is different: it appears as a separate panel — a live, rendered, interactive application running alongside the conversation.
Claude generates the code (HTML, CSS, JavaScript, React) for the Artifact and renders it in real time. You interact with the Artifact directly — clicking buttons, filling forms, watching visualizations update — while the conversation where you built it remains open on the left.
The Five Artifact Types
React Components: The most powerful type. Full React applications with state management, component hierarchy, and the ability to use pre-installed libraries (Recharts, D3, Lucide icons, Tailwind CSS, and more). Use for: interactive dashboards, data visualizations, multi-step tools.
HTML/CSS/JavaScript: A single self-contained HTML file with embedded CSS and JavaScript. No framework, pure web. Use for: simpler interactive tools, games, calculators, forms with custom logic.
Mermaid Diagrams: Rendered flowcharts, sequence diagrams, entity relationship diagrams, and other diagram types from Mermaid syntax. Use for: process flows, system architecture, organizational charts.
SVG Graphics: Scalable vector graphics rendered directly. Use for: custom icons, illustrations, infographics, simple animations.
Markdown Documents: Formatted markdown rendered as a clean document. Use for: structured reference documents, checklists, formatted reports.
Artifacts vs. Code Blocks
The key difference: a code block in Claude’s response is static text you copy and run elsewhere. An Artifact is live and rendered — you interact with it directly in Claude. For tools you want to use immediately without any setup, Artifacts are the faster path.
Setting Up Artifact-Friendly Conversations
Enabling Artifacts
In Claude.ai, Artifacts should be available by default. If you do not see them activating when Claude generates interactive content:
- Check your conversation settings (the toggle area below the text input)
- Verify you are on a plan that includes Artifacts (Pro and above)
- Try explicitly requesting an Artifact in your prompt: “Build this as a Claude Artifact”
The Artifact Prompt Signal
Claude generates Artifacts when the request clearly calls for an interactive, standalone tool. These phrases reliably trigger Artifact generation:
- “Build an interactive [X]”
- “Create a [tool/calculator/dashboard/tracker] that…”
- “Make a working [thing] I can use right now”
- “Build this as a React app / HTML tool”
Generic requests (“help me calculate X”) may produce text answers. Explicit tool requests trigger Artifacts.
Prompting for Artifacts: What Works
The Artifact Brief Structure
The most common mistake in Artifact prompts is under-specifying the user experience. Unlike code that runs elsewhere, you interact with Artifacts directly, so what happens when you click things matters.
BUILD: A [type of tool] that [primary function]
USERS: [Who will use this and what they know]
CORE FUNCTIONALITY:
- [Feature 1: describe the interaction, not just the data]
- [Feature 2]
- [Feature 3]
INPUTS: [What the user enters or provides]
OUTPUTS: [What the tool shows, calculates, or produces]
INTERACTIONS:
- When the user does X, the tool should do Y
- [Any important UX behavior]
DATA:
- [If it needs sample/default data, describe it]
- [If it connects to stored data, describe the structure]
VISUAL STYLE:
- [Color scheme or theme, if important]
- [Layout preference: clean/minimal / data-dense / etc.]
- [Any specific design elements]
CONSTRAINTS:
- [Things NOT to include]
- [Limitations to observe]
Iteration Is the Workflow
No Artifact is perfect on the first generation. The expectation is:
- First version: core functionality working, approximate design
- Second iteration: UX refinements, additional features, design polish
- Third iteration: edge cases, performance, final adjustments
Each iteration is a follow-up message: “The calculation in Step 2 is wrong — it should use compound interest not simple interest” or “Add a reset button that clears all inputs” or “Change the color scheme to dark mode.”
Ten Real-World Artifact Projects
Project 1: Business Pricing Calculator
What it is: An interactive calculator that produces a price quote based on configurable variables — used for proposals, client conversations, or internal pricing reference.
The prompt:
Build a React pricing calculator for a web development agency.
PRICING VARIABLES (all should be adjustable):
- Project type: New website / Redesign / Web app
(different base prices for each)
- Pages: Slider from 1–50 (adds $200/page over 5 pages)
- E-commerce: Toggle (adds $3,000 if on)
- SEO package: None / Basic ($500) / Advanced ($1,500)
- Maintenance retainer: None / 3-month ($2,000) / Annual ($6,000)
- Rush delivery (under 4 weeks): Toggle (adds 25% to total)
DISPLAY:
- Live total that updates as options change
- Itemized breakdown showing each cost component
- "Range" showing -15% to +15% around the estimate
- A "Get Formal Quote" CTA button (doesn't need to do anything)
STYLE: Clean, professional, blue and white palette
Why it is useful: Immediately available for client conversations, shareable as a link, and customizable per project by adjusting the prompt.
Project 2: Content Calendar Planner
What it is: An interactive weekly/monthly content planning board with drag-friendly workflow status.
The prompt:
Build a content calendar React app for a weekly newsletter
and blog schedule.
VIEWS: Toggle between Weekly (current week) and
Monthly (full month grid) views
CONTENT ITEMS: Each item has:
- Title (editable text)
- Type: Newsletter / Blog / Social / Video
- Status: Idea / Drafting / Review / Scheduled / Published
- Platform tag
- Color-coded by type
FUNCTIONALITY:
- Add new content items with a quick-add form
- Click any item to edit its details
- Click status to cycle through statuses
- Filter by type or status
STYLE: Clean editorial feel, muted colors by content type,
white background, card-based layout
Project 3: Decision Matrix Tool
What it is: A structured decision-making tool that weights criteria and scores options, producing a ranked recommendation.
The prompt:
Build an interactive decision matrix React app.
STRUCTURE:
- User adds "Options" (things being compared) — up to 6
- User adds "Criteria" (factors that matter) — up to 8
- Each criterion has a "Weight" (importance from 1-5)
- User scores each option on each criterion (1-10)
- Tool calculates: score × weight for each cell
- Displays weighted total for each option
- Highlights the winning option
UI:
- Table layout: options as columns, criteria as rows
- Inline editing for all values (click to edit)
- Live totals update as values change
- Bar chart showing final scores comparison
- Export as image button (if possible with HTML canvas)
DEFAULTS: Pre-populate with an example
("Choose a CRM" with 3 options and 4 criteria)
so the user can see how it works immediately
Project 4: Habit and Goal Tracker
What it is: A daily habit tracking interface with streak counting and progress visualization.
The prompt:
Build a habit tracker React app with persistent storage.
HABITS:
- User can add/remove habits (name + frequency: daily/weekly)
- Each habit displays: name, current streak, completion rate
- Daily check-off: mark a habit as complete for today
STREAKS:
- Calculate and display current streak for each habit
- Show longest streak in history
VISUALIZATION:
- GitHub-style heatmap of completions for the last 30 days
- Per-habit: small sparkline of completions over last 2 weeks
- Summary: "X of Y habits completed today"
PERSISTENCE:
Use the Artifacts storage API to save habits and completion
history so data persists between sessions.
STYLE: Motivating but not over-designed. Clean, modern.
Green for completed, gray for missed, white background.
Project 5: Meeting Cost Calculator
What it is: A real-time calculator showing the cost of a meeting as it happens, based on attendee salaries.
The prompt:
Build a meeting cost calculator.
INPUTS:
- Number of attendees (slider: 2-30)
- Average annual salary of attendees ($40k-$500k, slider)
- Meeting duration (start a timer when "Start Meeting" clicked)
DISPLAY:
- Large, prominent running cost counter that ticks up
in real time
- Cost per minute displayed
- Equivalent "what we could have bought instead"
comparisons that update live:
* Cups of coffee (at $5 each)
* Hours of freelance work (at $75/hour)
* Monthly SaaS subscriptions (at $100/month)
CONTROLS:
- Start / Pause / Reset buttons for the timer
- Adjustable inputs that update the rate live
STYLE: Dark theme. Large red numbers for the running cost.
Make it slightly dramatic to make the point about
meeting costs.
Project 6: Proposal / Contract Builder
What it is: A form-driven document builder that produces a formatted professional document.
The prompt:
Build a project proposal document builder.
FORM INPUTS:
- Client name and company
- Project title and description
- Scope items (add/remove list, each with title and description)
- Timeline (start date, end date, with phase builder)
- Pricing (itemized with add/remove rows, calculated total)
- Payment terms (dropdown: 50/50 / milestone-based / monthly)
- Your company name and contact
OUTPUT:
- Live preview on the right that updates as form fills in
- Preview shows formatted proposal document with sections:
Executive Summary, Scope, Timeline, Investment, Terms
- "Copy to Clipboard" button that copies formatted text
- Print button
STYLE: Left panel: form. Right panel: preview document.
Preview should look like a real professional document.
Project 7: Interview Preparation Flashcards
What it is: An interactive study tool for job interview preparation with spaced repetition logic.
The prompt:
Build a React flashcard app for job interview preparation.
DEFAULT CARDS: Pre-load 15 common behavioral interview
questions (e.g., "Tell me about a time you failed")
CARD STRUCTURE:
- Front: Question
- Back: Framework hint (e.g., "Use STAR method:
Situation, Task, Action, Result") + space for user notes
INTERACTIONS:
- Click/tap to flip card
- Mark as: "Need practice" / "Getting there" / "Got it"
- Cards shuffle based on marks (focus on weaker ones)
- Add custom cards with a + button
PROGRESS:
- Progress bar showing distribution of card ratings
- "Cards remaining today" counter
- Session stats when deck is complete
PERSISTENCE: Save card ratings and custom cards
using the storage API.
STYLE: Clean card-flip animation. Green for "Got it",
yellow for "Getting there", red for "Need practice".
Project 8: Data Dashboard from CSV
What it is: An interactive dashboard that the user populates by pasting CSV data.
The prompt:
Build a data dashboard React app for sales performance data.
DATA INPUT:
- Text area where user pastes CSV data
- Expected columns: Date, Salesperson, Region, Product,
Amount, Status (Won/Lost/Pending)
- "Load Data" button that parses and displays the dashboard
DASHBOARD DISPLAYS (all interactive/filterable):
- Top metric cards: Total Revenue, Won Deals,
Conversion Rate, Average Deal Size
- Bar chart: Revenue by Salesperson (sortable)
- Line chart: Revenue trend by month
- Pie chart: Revenue by Region
- Table: Individual deals with sort and filter
FILTERS: Date range, Salesperson, Region, Status
All charts update when filters change.
SAMPLE DATA: Pre-load with 30 rows of realistic
sample sales data so the dashboard works on load.
STYLE: Professional BI dashboard. Dark sidebar with
white cards. Recharts for visualizations.
Project 9: Budget vs. Actuals Tracker
What it is: A financial tracking tool comparing planned budget to actual spending with variance alerts.
The prompt:
Build a budget vs. actuals tracker React app.
STRUCTURE:
- Category rows (add/remove): each has a name,
budget amount, and actual amount
- Categories group into sections:
Revenue, Cost of Goods, Operating Expenses
CALCULATIONS (live):
- Variance: Actual - Budget (positive = over budget)
- Variance %: (Variance / Budget) × 100
- Color coding: Green if under budget, red if over
SUMMARY ROW:
- Total Budget, Total Actual, Total Variance
- Gross Margin % for revenue vs. cost rows
- Net Profit row at bottom
VISUALIZATION:
- Horizontal bar chart comparing budget vs. actual
per category
- Traffic light system: green/yellow/red per category
PERSISTENCE: Save all values using storage API.
STYLE: Spreadsheet-like but cleaner. Financial/corporate
feel. Tables with subtle alternating row colors.
Project 10: Learning Quiz Generator
What it is: A study tool that generates and scores quizzes from content you paste in.
The prompt:
Build a quiz generator React app that uses the
Anthropic API to generate questions from provided text.
WORKFLOW:
Step 1: User pastes study material (text, up to 2000 words)
Step 2: User selects: Number of questions (5/10/15/20),
Question type (Multiple choice / True/False / Mixed),
Difficulty (Easy / Medium / Hard)
Step 3: Click "Generate Quiz" — calls Anthropic API to
generate questions
Step 4: Interactive quiz interface with one question at a time
Step 5: Results screen with score, correct answers,
and explanations
API CALL: Use Claude to generate questions in JSON format:
{
"questions": [
{
"question": "...",
"options": ["A", "B", "C", "D"],
"correct": "B",
"explanation": "..."
}
]
}
STYLE: Clean educational feel. Progress indicator
during generation. Engaging quiz UI with immediate
feedback per answer.
The Persistent Storage API in Artifacts
One of the most powerful features for building genuinely useful Artifacts is persistent storage — the ability for an Artifact to save data between sessions. A habit tracker that resets every time you close Claude is useless. One that remembers your data indefinitely is genuinely useful.
How the Storage API Works
Claude Artifacts have access to a window.storage API:
// Save data
await window.storage.set('myData', JSON.stringify(data));
// Retrieve data
const result = await window.storage.get('myData');
const data = result ? JSON.parse(result.value) : null;
// Delete a key
await window.storage.delete('myData');
// List all keys
const keys = await window.storage.list();
Including Storage in Your Prompts
When building Artifacts that need to persist data, explicitly request it:
PERSISTENCE: Use the window.storage API to save [what data]
so that it persists between sessions. On load, retrieve
any stored data and restore the previous state. Include
a "Clear all data" option in the settings.
What Storage Is Appropriate For
- User preferences and settings
- Accumulated data (habits, entries, notes)
- Saved configurations (custom rates, names, options)
- Progress state (quiz scores, completed items)
What NOT to Store in Artifacts
- Sensitive information (passwords, financial account data, personal health information)
- Data subject to privacy regulations
- Large files or binary data
Claude-in-Claude: Using the Anthropic API Inside Artifacts
The most powerful Artifact capability is calling the Anthropic API from within an Artifact — meaning your Artifact can itself use Claude to process requests.
This enables Artifacts that are genuinely AI-powered: quiz generators that create questions from your content, tools that analyze input and provide intelligent recommendations, document generators that use AI to fill in appropriate content.
How to request this capability:
Build this as a React Artifact that uses the Anthropic API
for [specific AI function].
API call should:
- Use claude-sonnet-4-5 model
- System prompt: [Your system prompt]
- User message: [What gets sent to Claude]
- Parse the response as: [Text / JSON]
Display a loading state while the API processes.
Handle errors gracefully.
Note: The Anthropic API calls from Artifacts do not require you to handle authentication — Claude manages this automatically in the Artifact context.
Sharing and Using Artifacts
The Artifact Panel Controls
Once an Artifact is generated, you have several options in the Artifact panel:
- Copy code: Get the underlying source code
- Download: Save the HTML/JS file locally
- Expand: Full-screen view of the Artifact
- Refresh: Reload the Artifact
Making Artifacts Standalone
To use an Artifact outside Claude:
- Click “Copy code” to get the source code
- Paste into a file (e.g.,
tool.html) - Open in any browser — it runs without any server
- Share the file directly, or host it on any static hosting service (Netlify, GitHub Pages, Vercel)
When to Move Beyond Artifacts
Artifacts are excellent prototypes and can be genuinely useful standalone tools. But there are clear signals when you need a proper development approach:
- You need to handle real user authentication
- You need to connect to a production database or API that requires server-side credentials
- You need the tool to be maintained and updated regularly by a team
- You need precise performance for large data volumes
- You need the tool to integrate with other production systems
When you hit these limits, the Artifact you built serves as a precise specification for a developer — showing exactly what the tool should do and how it should behave.
Common Artifact Mistakes
Mistake 1: Under-Specifying the Interaction
Describing what data to show is not enough — describe what happens when the user interacts with it. “A dashboard showing sales data” produces a static display. “A dashboard where clicking a salesperson filters all charts to that salesperson’s data” produces something useful.
Mistake 2: Trying to Build Too Much in One Prompt
Complex Artifacts built in a single prompt often have bugs and incomplete features. Start with core functionality working perfectly, then iterate to add features. Five iterations of a simple tool produces better results than one attempt at a complex one.
Mistake 3: Not Requesting Sample Data
If your Artifact needs data to function, always include “pre-populate with realistic sample data” in your prompt. An Artifact that requires you to enter data before anything appears is harder to evaluate and iterate on.
Mistake 4: Storing Sensitive Data in Artifacts
The storage API is convenient, but Artifacts are browser-based tools. Do not store sensitive personal, financial, or health information in Artifact storage — it is not encrypted for sensitive data compliance purposes.
Mistake 5: Not Specifying Error States
Ask Claude to handle the error cases explicitly: “Show a friendly error message if the CSV format is wrong” or “Disable the calculate button if required fields are empty.” Artifacts without error handling break in ways that are confusing to users.
Conclusion
Artifacts represent one of the most practically compelling capabilities in Claude — the ability to move from “I need a tool that does X” to actually having that tool, interactively, in minutes.
The projects in this guide are starting points, not limits. Every tool you build teaches you how to prompt for the next one more effectively. The iteration model — start simple, refine through conversation — is the right workflow, and it becomes faster with practice.
The most important insight about Artifacts: the prompt quality determines the output quality exactly as much as it does for any other Claude interaction. The more specifically you describe what happens when users interact with the tool, the closer the first version comes to what you actually want.
Your next step: Pick one tool from the ten projects above that is closest to something genuinely useful for your work. Use the prompt as a starting point, customize the specifics for your situation, and build it. The first Artifact you build will show you immediately what is possible — and what your next one should be.
📚 Continue the Series:
- ← Previous Claude for Coding: From Beginner Scripts to Complex Debugging
- Next → Claude for Research and Analysis: Deep Dives Without the Grind
- For building with the API The Claude API for Non-Developers
- For advanced development Claude for Developers: Advanced Techniques
- Series foundation Claude AI Masterclass
Last updated: April 2026. Artifact capabilities, available libraries, and the storage API are updated by Anthropic regularly. Verify current Artifact capabilities at claude.ai and docs.anthropic.com.
⚠️ Do not store sensitive, personally identifiable, or regulated data in Artifact storage. Artifacts run in a browser environment — treat them as client-side browser applications with the corresponding security model. For tools handling sensitive data, proper development with server-side security is required.
