🧠How to use Claude Artifacts to build simple prototypes
Knowledge Series #51: Use cases for prototypes, API docs mind maps, testing UX components, visualizing data and more
The Knowledge Series is available for paid subscribers. Get full ongoing access to 50+ explainers and tutorials to grow your technical knowledge at work. New guides added every month.
Hi everyone 👋,
It’s now easier than ever to build basic applications and prototypes without being an engineer or knowing how to code.
Sure, you still need to have a technical background to figure out how all the pieces fit together and to troubleshoot, but it’s now possible to create simple prototypes and apps without asking for help from your engineering team.
The challenge is in figuring out where to start - and understanding what the capabilities of these new tools are - without getting too overwhelmed.
In this Knowledge Series we’re going to look at how Anthropic’s Claude Artifacts can be used at work for building simple prototypes, UX components, visualizing data and more.
Paid subscribers get full access to this series - with new topics added every month. If you’re interested, you can upgrade to receive them.
Coming up, how to use Claude Artifacts for:
Building simple prototypes which bring your ideas to life
Testing new UX componentsÂ
Visualizing data and creating your own personal data dashboards
Creating mind maps for API documentation and understanding technical concepts
Building your own simple productivity application you can use at work
What are Claude Artifacts?
But before that, a quick recap about what Claude Artifacts are. If you’re not completely familiar with Claude, it’s Anthropic’s AI assistant that has gone from strength to strength in recent months. The co-founder and CTO of Instagram joined Claude as its CPO earlier this year and Artifacts was first announced a few weeks back as one of his first major new features.
Artifacts is built right into Claude and it essentially allows users to type prompts and build simple apps. These apps are pretty simple and can hardly be described as fully fledged products, but they’re more than capable of working as simple product prototypes or for testing specific UX components (more on that shortly).
GitHub launched its own version of this type of thing with the launch of Spark a few weeks back and other companies are also releasing their own versions of similar functionality.
Alongside apps, Claude also gained a bunch of new capabilities recently which took its powers further including the ability to analyze data and use your computer through Computer Use. We won’t be covering Computer Use in this Knowledge Series, but we will take a look at how you can use data analysis for building out dashboards.
OK, that’s enough context - let’s take a look at the first use case for Artifacts: building simple prototypes.
Building simple prototypes
Let’s imagine you have a new idea but don’t want to take up anyone else’s time. You want to quickly mock something up to test out yourself to see how it looks / feels.
Using Claude Artifacts, you can do this in just a few minutes.
Let’s imagine you’re a PM or product designer working at Coinbase and you have an idea that you’d like to test out. In this case you want to understand what an AI assistant might look like in the context of the Coinbase Dashboard.
How to use Artifacts to build a simple prototype
The first time I played around with Artifacts, I was genuinely shocked (and a little terrified) about just how powerful this thing is. And this use case is one of the reasons why I was so shocked.Â
The first step is to take a screenshot of your product. We’ll do this because we can use this as a way to tell Claude what our product looks like today and Claude will build its own prototype using the same format and colors to match your own. Once you have a base to work from you can then start to experiment by adding new features to it to test out.
I took a screenshot of Coinbase’s dashboard and asked Claude to build an Artifact from it using this prompt: