Skip to content
Pinoy AI WorksPinoy AI Works

Interactive tools with Claude Artifacts

Claude · Artifacts lesson

See and test your work in a split screen

Section titled “See and test your work in a split screen”

When you ask Claude to create a document, checklist, or calculator, it does not just output plain text in the chat bubble. It opens a dedicated side window called an Artifact. You can click buttons, test calculations, and preview designs right in your browser without installing any software.

What you need

Section titled “What you need”
  • A free account on claude.ai.
  • A web browser on a computer, tablet, or phone.
  • No programming experience is needed.

Try this: Build an interactive grocery checklist

Section titled “Try this: Build an interactive grocery checklist”
  1. Open claude.ai and start a new chat.
  2. Copy and paste this prompt:
Create an interactive checklist for a weekly family grocery shopping trip in the Philippines.
Group items by section: Produce & Wet Market, Pantry Staples, and Household Cleaning.
Make the checkboxes clickable so I can check them off as I shop.
Include a button to add new custom items.
  1. Claude will generate the checklist in a split-screen panel on the right side of your screen.
  2. Click the checkboxes to test them.
  3. In the chat on the left, you can ask for adjustments: “Add fresh calamansi and cooking oil under Pantry Staples.” The Artifact updates instantly on the right.

Great things you can build with Artifacts

Section titled “Great things you can build with Artifacts”
  • Loan & Installment Calculator: Enter an item price and calculate monthly installment fees with interest rates.
  • Study Flashcards: Flip through digital flashcards to review vocabulary or exam terms.
  • Service Quotation Generator: Enter hours worked and materials used to generate a clean client invoice preview.
  • Visual Mind Maps & Diagrams: Ask Claude to draw flowcharts explaining a business process or family tree using clean diagrams.

How to share or export an Artifact

Section titled “How to share or export an Artifact”
  • Click the Publish or Copy button at the top of the Artifact window.
  • You can copy the code, save it as a standalone HTML file, or share a live link with friends or colleagues.

Before you rely on it

Section titled “Before you rely on it”
  • Artifacts run safely inside your browser. They cannot access your private files or hard drive.
  • Never paste passwords, client database records, or confidential work documents into public chats.

Next: Claude Projects & Co-work · Review a document · Everyday AI