Getting Started with AI-Assisted Tool Building

Before You Begin

You'll need:

• A Claude.ai account (free tier works fine)
• A web browser (Chrome, Firefox, Edge, etc.)
• Your content—any of these work:
  • Upload a file (Word doc, PDF, notes)
  • Paste text directly
  • Share a link (Claude can read public sites like Louisiana Believes, state standards pages, etc.)
  • Just describe it (the unit you're teaching, the literature you're covering, the skills you're targeting)
• A place to save files on your computer

That's it. No special software to install.

The Prompt

Copy everything in the box below and paste it into Claude. Then upload your content file(s) when prompted.

I'm a teacher new to using AI for building tools. I want to create an HTML slideshow presentation aligned to my standards, and I want to understand how it works—not just get a finished product.

**My situation:**
- I have no coding experience
- I'm using Claude.ai in my browser
- I have content I'll upload (standards, lesson materials, unit outline, or notes)
- I want to learn how HTML, CSS, and JavaScript work together

**Please help me by:**

1. **First, ask me to share my content.** I might upload a file, paste text, give you a link to a public website (like Louisiana Believes or a state standards page), or just describe what I'm teaching. Wait for me to share my materials before doing anything else.

2. **After I upload, ask me a few quick questions—one at a time:**
   - What subject and grade level is this for?
   - How many slides do you think would work well? (or should I suggest a number?)
   - Any specific colors or style preferences? (or should I keep it simple and clean?)
   - Will you present this on a projector, smartboard, or student devices?

   Wait for my answer before asking the next question. Don't overwhelm me with multiple questions at once.

3. **Then build the slideshow, but teach me as you go:**
   - Use Claude's Artifact feature so I can see a live preview
   - Before or after showing the code, briefly explain the three parts:
     - **HTML** = the structure and content (the "what")
     - **CSS** = the styling and layout (the "how it looks")
     - **JavaScript** = the interactivity (the "what happens when I click")
   - Point out a few specific lines so I can start seeing patterns
   - The slideshow should use arrow keys or click/tap to navigate

4. **Show me how to download and use the file:**
   - Point out the download button on the Artifact
   - Tell me how to name it and where to save it
   - Explain how to open it in my browser

5. **After it works, show me how to make a small change myself:**
   - Something simple, like changing a color or editing text
   - Walk me through finding the right spot in the code
   - This helps me understand I can tinker with it later

**Important:** I want to build understanding, not just get a file. Check in with me at each step. Don't assume I know things. If I seem confused, slow down and explain more simply. Treat me like the intelligent adult I am who just happens to be new to this specific skill.

I'm ready to start! What should I upload first?

What to Expect

After you paste this prompt, Claude will:

1. Ask for your content — Upload a file, paste text, share a link, or just describe what you're teaching
2. Ask clarifying questions — Answer in plain language, no tech jargon needed
3. Build your slideshow and explain the pieces — You'll see how HTML, CSS, and JavaScript each do their job
4. Show a live preview — Test it right in your browser window
5. Help you make a small change — So you see you can tinker with it yourself
6. Show you how to download and use it — The file works forever, no internet needed

Tip: After downloading to your computer, RIGHT click the file and open with the browser of your choice.

Tips for Success

• Start simple. Your first slideshow doesn't need animations or fancy features. Get comfortable with the basic workflow first.
• It's okay to say "I don't understand." Claude will explain differently.
• Save your prompts. When something works well, copy the conversation or the prompt so you can reuse it.
• The file is yours. The HTML file works offline, forever. No subscription, no account needed to present it.

If Something Goes Wrong

Just tell Claude what happened. For example:

• "I downloaded the file but I can't find it"
• "When I open the file, it just shows a bunch of code"
• "The slides look weird on my smartboard"

Claude can troubleshoot with you.

Why HTML?

An HTML slideshow is just a file. It:

• Opens in any browser on any device
• Works without internet once downloaded
• Can't "expire" or require updates
• Doesn't need PowerPoint, Google Slides, or any software
• Can be easily edited later (with Claude's help)

Next Steps After Your First Slideshow

Once you're comfortable, you might try:

• A vocabulary review with interactive elements
• A reading passage with built-in comprehension questions
• A writing prompt generator for your class

Same process, same prompt style—just different content.