Gemini Canvas Example

Claude feels like a genie to me. With its Artifacts feature I can turn any idea I have into an interactive application, visualization, or graphic. Yesterday I created a Flashcard maker and a breathing app. No coding. Just a short AI chat conversation. No complexity. I dream up an idea, and Claude makes it instantly real. I iterate with chat to make it better. Read on for a guide to making the most of Artifacts with examples and ideas you can build yourself.

✨ How to turn ideas into apps (no coding)

* Create a free Claude.ai account or log in if you already have one.

* Navigate to the “Artifacts” tab.

* Pick one of the existing templates in the Inspiration gallery to customize.

* If you don’t want to use a template, click “New Artifact” in the top right corner of the Artifacts landing page. Pick a category of interest (e.g. Games, Quizzes, etc). Chat with Claude to iteratively design an artifact.

* Customize your Artifact by pasting or uploading specific content you want it to use, or by defining a particular color palette or design style. Explain how you want it to work or ask Claude to guide you with questions.

* Test out the Artifact. Click “Publish” when you’re ready to get a shareable link and optional embed code.

* Return to the Artifact later to update or change it.

* 🔁 Repeat to make as many Artifacts as you want. Free users may run into rate limits.

Sponsored Message

Let your data do all the talking

Turn spreadsheets into sleek, interactive visuals without a line of code. With Flourish, you can quickly create charts, maps, and interactive content that impress clients, engage audiences, and make your insights crystal clear.

💡Try These: Apps You Can Make Right Now

✏️ Master Any Subject (Study tools you can make)

Create a resource to help you learn whatever you want. Use specific facts, diagrams, documents, or other materials to seed the assistant, or ask Claude to suggest relevant info. The flashcard maker I created lets me paste in some text, upload a PDF, or just describe a topic of interest. It instantly generates 10 questions for me. [See my prior post on using AI for Learning].

My Example: Instant Flashcard Maker

📊 Visualize Your Data

In addition to summarizing documents or transforming files, you can use AI to make sense of data. Ask Claude to analyze or visualize info in specific formats or with your preferred design sensibility. You can upload reference images or your style guide, or just specify style or tone.

My Example: Visualize CSV Data

🎭 Design Custom Quizzes

It’s now easy to make your own version of “Which Harry Potter House Are You?” quizzes. Pick a subject and supply some questions. Or ask Claude to propose questions and you can act as the editor. These can be just silly or they can help students or colleagues figure out where they stand on an issue.

My Example: What’s Your AI Personality?

🔗 Make Content Interactive

Include a link to an Artifact in your next piece of writing or presentation to add an interactive element. Invite readers or viewers to try it for themselves.

Ideas: a visual story summary, a quiz, infographic, dashboard, or a customized cost calculator. 🧮

How to get started: Upload or paste content you’ve created —or a transcript, if it’s audio or video— and chat with Claude about interactive supplements that might be useful for your reader.

Examples

- WT Conference Toolkit Guide - Note-Taking Devices — Interactive Summary Table

Sponsored Message

Bento Focus | In the era of AI, noise is increasing. It’s time to take your focus seriously!

✅ Test Your Knowledge

Testing yourself helps identify knowledge gaps. You can upload specific material you’re aiming to master or just ask Claude to design a quiz Artifact for you on any subject. Give it context about your level and the kinds of questions you’ll find most useful, as well as your preferred quiz length.

My Example: Liquidation preference quiz

🎯 Build a Decision Helper

Figure out which of multiple options works for you. This kind of interactive poses a series of preference questions to determine a result based on your answers. It guides decisions based on whatever criteria and grounding info you provide. To customize my own matching tools, I use my own writing, analysis and research to serve as the basis for the Claude Artifact. I based the following examples on my own research on AI learning modes and note-taking tools.

Examples

- Find your preferred AI learning mode - Find Your Perfect Note-Taking Tool

🧘 Create Calm (Meditation & timer apps)

Claude Artifacts can employ timers and graphics. To make a simple breathing app, I gave Claude instructions about the 4-7-8 breathing pattern.

4 seconds of breathing in; 7 seconds holding; 8 seconds of exhalation.

I included a link to the source article from which I drew the information, and instructed Claude to run four cycles of the breathing timer for an activity that would last about a minute.

Example: My 60-second breathing relaxation app

🎮 Make a Game

It’s simple to make puzzles, simple arcade-style games, or word games. Describe the game you have in mind or ask Claude to give you some ideas to work with. Create your own version of something you loved to play as a kid, or a brain teaser to give yourself a playful mental break at work.

Example: Word Morph

Other ideas for what to make:

* A specialized assistant for single-purpose tasks like generating a QR code, cleaning up messy notes, translating phrases, or assessing headline ideas

* A banner image like the one above I made for this post

* A prototype site like this mood canvas to share an idea with a colleague

* A document or template like this PRD maker (for product requirements) to reformat your own content

* Visualizations for creativity or quick prototyping

* Campaign dashboards for sharing performance metrics

* Sales pipeline forecasts or other interactive charts

⚠️ Limitations to Consider

* Sometimes Claude leaves out a detail or a button doesn’t work. Other times, what you’ve envisioned doesn’t look quite right. Solution: You often have to prompt the model to make corrections, which it does well.

* Artifacts don’t have built-in databases to store information. So if you create a habit tracker or content calendar, what you type in during one session won’t be stored for later. You can ask it to add an export capability, but if you need the tool to store data you can return to, you’re better off with a more sophisticated AI coding tool (for so-called '“vibe coding”) like Windsurf, Bolt, or Lovable.

* While powerful, these Artifacts aren’t agents that can go out to the Web and interact with multiple data sources to update an app.

🔄 Similar Tools Worth Trying

Gemini Canvas | Google’s Gemini also excels at creating great interactives and tools. I made this little alt-text generator for Wonder Tools with a short prompt that took less than a minute. I asked it to handle multiple images and offer two alt-text options for each. Canvas is free for all users; a pro subscription gets you access to a more powerful model.

Perplexity Labs lets you generate detailed reports with infographics, create visual dashboards with business or economic data, or make other interactive graphics. Here’s an example of a family museum itinerary planner, and a coffee shop’s financial dashboard.

Additional examples: Check out Perplexity’s Project Gallery for inspiring ideas. Caveat: Unlike Claude Artifacts and Gemini’s Canvas, which can be used for free, Perplexity Labs requires a $20/month subscription.

What will you create next? Share your Artifacts in the comments 👇 or reply to this email—I’d love to see what you build.

This is a public episode. If you'd like to discuss this with other subscribers or get access to bonus episodes, visit wondertools.substack.com/subscribe