ClaudeArtifactsLevel 2: Context

Can Claude Turn a Rough Idea Into Something You Can Click?

Claude can build a clickable prototype as an artifact if you describe the idea and ask for sample data that's labeled as such. You'll learn what's wrong with the idea faster by using it than by reading a description. The Design template is built for visuals, mockups and landing pages.

Prompt to copy
I have a rough idea: [one or two sentences].
The person using it is [who], and they want to [goal].

Build a clickable prototype as an artifact, so I can feel how it works.
- Show the main flow from start to finish, in at most 4 screens.
- Use sample data, clearly labeled as sample.
- Include the empty state and one error state.
- Don't build sign-in, settings or anything outside this flow.

Then list the 3 questions this prototype can't answer, so I know what still needs real evidence.
  1. Written descriptionmissing steps stay hidden
  2. Clickable, labeled sample datatest the idea here
  3. Stored data, connected appslater, adds setup and risk
  4. A real build from a speconce the idea holds
A rule of thumb, not a vendor claim: climb only when the rung below has shown the idea is worth it.

Try it now

  1. 1Write your idea in two sentences, and don't polish it.
  2. 2Send the prompt above, or open the **Artifacts tab and start from the Design** template.
  3. 3Click through the whole flow in the panel, as if you were the user, and write down the first thing that annoys you.
  4. 4Ask for that one change. You'll know it worked if you now have an opinion about the idea that you didn't have before.

Use it when

Use it before you spend real time on an app idea, a new onboarding flow or a pricing page. It's also good for showing a colleague what you mean, because a link gets a better reaction than a paragraph.

Skip it when

Don't use it to test whether real people will pay, or how a system behaves under load. A clickable mockup can't answer those. Also don't treat the code as a starting point for production without review, and don't paste real customer data just to make it look right.

Why it works

Anthropic's help center says artifacts cover single-page websites, diagrams, flowcharts, dashboards and small interactive tools, and they open beside the chat where you can use them. The point of a prototype is what it exposes. Rule of thumb, not a vendor claim: when you click through a flow, you notice the missing step or the screen you don't need, which is hard to spot in a written description. Designs can also use a design system and export as .zip, PDF, PowerPoint or standalone HTML.

Example

You think a small gym could use a class-waitlist tool. You ask for a four-screen prototype: browse classes, join a waitlist, get a spot, confirm. Sample classes are labeled as sample. Clicking through, you find there's no way to leave a waitlist, and that the confirmation needs a deadline. Those are questions about the idea, and you found them before writing any real code.

Going further

If you want the prototype to feel real, on paid plans an artifact can store data between sessions, up to 20 MB of text, and read from connected apps like Google Calendar or Slack, with each user connecting their own account. Keep that for a later round, since real data adds setup and risk before you've shown the idea is worth it. When you're ready to build properly, take the flow and the list of open questions into a spec instead of extending the prototype.

Common mistakes

  • Asking for a polished product on the first try, then reacting to the colors rather than the flow.
  • Forgetting to label sample data, so a screenshot gets passed around as if the numbers were real.
  • Skipping the empty and error states, which is often where a flow turns out to be missing something.
  • Building on prototype code because it already runs, instead of writing a spec first.

Sources

Checked 6 November 2026. Products change often, so confirm details with the vendor.

Related

Beyond the course