Build Something: Your First AI-Generated App

What you need

Steps

1. 01

   Describe what you want — build your first app

   ~2 minutes

   Open Claude and paste the prompt below. Claude will generate a working quiz application as an "Artifact" — a live, interactive panel alongside the chat. You can click through the quiz, answer questions, and see your score. It works right now, in your browser. Take a moment: you just built an app.

   PromptCopy

   Build me an interactive quiz about Iceland. Include 8 questions covering geography, culture, language, and nature. Each question should have 4 multiple-choice answers. Show one question at a time, track the score, and show a final results screen with how many I got right. Make it visually clean with a blue and white color scheme.

   What to expect

   A fully functional Iceland quiz as a live Artifact. You can click through it, answer questions, and see your final score — all without writing any code.

   Try this

   Replace "Iceland" with any country, topic, or subject you care about. The same structure works for history, science, movies, sports — anything.
2. 02

   Change it with words

   ~5 minutes

   The app exists but it's version 1. Iterate by typing follow-up instructions — each one updates the live app. Try the prompts below one at a time. This is exactly what professional developers do: build a first version, test it, then improve it. You're just using natural language instead of code.

   PromptCopy

   Add a timer that gives 15 seconds per question. Show a countdown bar that goes from blue to red as time runs out.

   What to expect

   The Artifact updates live with your requested change. Each iteration adds a new feature or refines an existing one without breaking what already works.

   Try this

   Other iteration prompts: "After the quiz, show which questions I got wrong and what the correct answers were." / "Add a 'Play Again' button that shuffles the question order." / "Make it work well on a phone screen."
3. 03

   Choose your own project

   ~10 minutes

   Now build something you actually want. Pick one of the five ideas below, or invent your own. Paste the matching prompt into Claude. A working first version will appear within seconds — it won't be perfect, and that's fine. Step 4 is about making it yours.

   PromptCopy

   Build me a personal dashboard with: a large digital clock that updates in real-time, today's date in a nice format, a section where I can write quick notes (saved in the browser), and a motivational quote that changes each time I reload. Use a dark theme with warm accent colors.

   What to expect

   A working first version of whichever project you chose. It may have rough edges in design or be missing features you imagined — that's normal and expected at this stage.

   Try this

   Other project ideas — Unit Converter: "Build a universal unit converter with tabs for Length, Weight, Temperature, and Currency. Convert in real-time as I type." | Memory Game: "Build a memory card matching game with a 4x4 grid of emoji pairs." | Decision Maker: "Build a decision-making tool that spins through options like a slot machine and picks one randomly."
4. 04

   Iterate until it's yours

   ~15 minutes

   This is the most important step. Talk to the AI about what you want changed — be specific. You are the product designer; the AI is the developer. Your job is to decide what to build and how it should feel. The AI handles the technical implementation. The ability to clearly describe what you want is a real, valuable skill.

   PromptCopy

   This works but it's ugly. Make it beautiful. Use good typography, proper spacing, subtle shadows, and make it feel like a real product.

   What to expect

   A visually improved version of your app. The AI will apply design principles — spacing, hierarchy, colour, depth — to transform functional-but-plain into polished.

   Try this

   Other iteration prompts: "The buttons are too small on mobile. Make them at least 44px tall." / "Change the color scheme to dark green and cream — like a vintage notebook." / "Add a sound effect when I get a correct answer using the Web Audio API."
5. 05

   Same idea, different builder

   ~10 minutes

   Take the same project idea and build it in ChatGPT Canvas (or Gemini). Use the same description prompt. Compare: which produced a better first version, which was easier to iterate on, did the designs look different? Note: Gemini may produce code rather than a live preview — save the HTML as a .html file and open it in any browser.

   What to expect

   A different version of your app, built by a different AI. The functionality may be similar but the design, code structure, and approach will differ. Neither is objectively better — they reflect different AI personalities.

   Try this

   If Canvas isn't available in ChatGPT in your region, use Claude Artifacts instead — it's available on the free tier.
6. 06

   For the brave: Set up a real development environment

   ~20 minutes

   You've built apps in the browser. Now, if you want to go further — build real projects, use version control, run code locally — you can ask AI to set up your entire development environment. This is optional and more technical, but the AI will walk you through every step. You don't need to understand it all yet. Just follow along.

   PromptCopy

   I'm a complete beginner who just built my first app using AI. Now I want to set up a real development environment on my Mac so I can build bigger projects. Walk me through installing and setting up everything I need, step by step, with exact terminal commands I can copy-paste:
   
   1. VS Code (code editor) — install it + the essential extensions for web development
   2. Node.js (via nvm so I can manage versions) — install the latest LTS version
   3. Python 3 (via pyenv or homebrew) — install and verify
   4. Git — configure it with my name and email, explain what it does in one sentence
   5. A project folder structure — create ~/Projects with a sensible layout
   6. A "hello world" test — create a tiny project that proves everything works
   
   For each step: give me the exact command, tell me what it does in plain language, and tell me how to verify it worked. Assume I've never opened a terminal before. If something might already be installed, show me how to check first.

   What to expect

   A complete, step-by-step walkthrough for setting up VS Code, Node.js, Python, and Git — with every command explained. The AI will adapt to your operating system and check for existing installations. By the end, you'll have a professional development setup.

   Try this

   If you're on Windows instead of Mac, tell the AI: "I'm on Windows, not Mac. Adjust all commands accordingly." For Linux, same approach. The AI handles the differences.
7. 07

   Save your work

   ~3 minutes

   Your app lives in the AI chat — if you clear the conversation, it's gone. In Claude: click the Artifact, then click the copy icon or "View Code" and save the HTML to a file on your computer (e.g. my-quiz.html). Open that file in any browser — it works offline. In ChatGPT: copy the full code from Canvas and save as an .html file. You can send the .html file to anyone. They open it in their browser. No installation, no app store, no server needed.

   What to expect

   A saved .html file that opens in any browser and runs your app completely offline. You can share it by email or messaging — the recipient just opens the file.

   Try this

   Ask the AI to explain the code to you, line by line. This is one of the fastest ways to start understanding programming — reading code you already know the purpose of.

What you learned

• How to build a working app by describing it in words
• How to iterate on software through conversation (the design loop)
• The difference between AI coding tools (Artifacts, Canvas, code generation)
• How to save and share what you built
• That 'knowing how to code' and 'being able to build software' are no longer the same thing

Go further

Troubleshooting