Claude: Everything You Can Build with Claude Artifacts
A step by step guide to creating apps, webpages, flow-charts, and more with Artifacts
Dear subscribers,
Today, I want to share an advanced guide on creating Claude Artifacts.
Artifacts are an incredible tool to prototype anything, even if you’re not technical.
They’re mini-programs that you can create just by chatting with AI. So let’s cover:
Everything you can build with Artifacts
A step-by-step guide to creating all six Artifacts
Five examples of great Artifacts that you can remix
This post is brought to you by…Amplitude
I haven’t found a great AI tool for product analytics until now. Amplitude's new AI answers your questions in plain English, with charts and follow-ups. They also provide quick-start dashboards, one-line instrumentation, and user journey profiles.
Everything you can build with Artifacts
As of this writing, here’s what you can create with Artifacts:
Code snippets: Can be in any coding language.
Webpages: Single page HTML, CSS, and Javascript.
Mermaid diagrams: Flow charts and other diagrams.
Documents: Markdown formatted docs.
SVG images: Simple vector drawings.
React components: Interactive apps.
Let’s walk through a real example of creating all of the above.
Turning Paul Graham’s essays into Artifacts
Paul Graham’s latest Founder Mode essay has taken Silicon Valley by storm. So, let’s use Claude to extract his recent essays and transform them into useful Artifacts.
1. Code: Extract Paul Graham’s 10 most recent essays
Let's first create a Python script to get Paul's recent essays and put them in a text file.
Here's the prompt to do just that (P.S. If this prompt seems complex, ask Claude to generate it by giving it a one-line request and my advanced prompt techniques post):
<instructions>
Create a Python script that gets the text from the first ten links of this webpage (https://www.paulgraham.com/articles.html) and saves their content to a text file.
Follow these steps:
In <thinking> tags, outline the key components and libraries needed.
Create a Python script that does the following:
Get the first ten essay links from the main article page
Extract the content of each essay, handling various HTML structures.
Save all the content to a single text file, clearly separating each essay.
Present your complete Python script as a Claude Artifact that I can copy and paste into an IDE like Replit.
After the script, in <explanation> tags, briefly explain how to run it and ensure it includes any dependencies that need to be installed.
Think through each step carefully before providing your final output. Ensure the script is complete.
</instructions>
Running this prompt will give you a Python script Artifact. To run the script, copy and paste it into an IDE such as Replit:
Go to Replit, sign up for free, and click Create Repl
Select the Python template and Create Repl
Copy and paste the code from the Claude Artifact into Repl and hit Run.
If successful, you'll see a new text file containing Paul Graham's ten most recent essays. Pro tip: If you hit an error, just copy and paste the error message into Claude and ask it to update the script. It works 99% of the time.
2. Mermaid diagram: Extract the insights for Founder Mode
Mermaid diagrams are an incredible tool for extracting insights from any large body of text.
Let’s create a mermaid diagram summarizing Paul’s founder mode essay. Paste the text file (or just copy and paste Paul’s essay) along with this prompt: