Appearance
AI as a Tool: Generative Software
A vibe-coding tool is a chatbot whose output is code, sent to something that runs it. The model underneath is the same kind of context completion engine you met in Workshop 1. The difference is where its answer goes: into an app instead of a chat bubble. That makes it a tool for prototyping. You steer it the way you'd sketch: you start with an intent, look at what comes back, and revise your intent as you go. The tool writes the code. You decide what the app should be and how its agent should behave.
What You'll Do
- Learn what "vibe coding" means, and why it's closer to sketching than to programming.
- See that a chatbot and a vibe-coding tool work the same way, and look at the code behind a generated app.
- Build a basic app with no AI features in Google AI Studio.
- Build a letter-writing assistant twice: once with no guidance, and once with your design intent, a user journey and your role card.
- Test the agent with a script, and revise it through conversation at least three times.
Before You Start
You'll need:
- A computer with a web browser and an internet connection.
- A Google account. Use a personal Google account if your school's account blocks AI Studio.
- Your role card from Workshop 2, if you have one. It becomes your agent's system instructions. If you don't have one yet, AI as a Material: Modeling Behavior shows how to write one.
- Your process journal, to record what you try. See Keeping a Process Journal.
Workshop 1, How It Actually Works: The Context Completion Engine, helps too. This workshop assumes you know that a model completes whatever context it's given.
You can work alone or with others. If you're in a group, build your own apps, then compare what AI Studio made for each of you.
Where We Are
Workshops 1 and 2 covered the parts of an AI system a designer controls:
- Model selection: which model runs the system.
- Parameters: settings such as temperature.
- System instructions: standing text that sets the agent's role, scope, boundaries and tone.
- Knowledge: material the system can draw on when it answers.
- Tools: things the agent can do besides generating text.
Together they decide what goes into the context. The user adds text too, and the model completes it all. Designing an agent means designing its behavior. What Vibe Coding Is recaps these in more detail.
Two Ways Through
- For a quick run-through, follow the TLDR. It's one page of short steps, with the links and prompts you need.
- For a deeper understanding, follow the guides below, in order. They cover the same steps and prompts, and add explanation, checks and questions to reflect on.
| TLDR steps | Guide | What it covers |
|---|---|---|
| 1 | What Vibe Coding Is | A recap of the design surfaces, and what vibe coding means. |
| 2–3 | Chatbots and Vibe-Coding Tools | Why a chatbot and a vibe-coding tool are the same kind of thing, and the code behind a generated app. |
| 4 | Building a Basic App in AI Studio | Your first app in Google AI Studio, with no AI features. |
| 5–7 | Giving AI Studio Your Design | A letter-writing assistant built with no guidance, then with your design. |
| 8 | Testing and Revising Your Agent | Testing the agent with a script, and changing it through conversation. |
Then do the Practice: AI as a Tool page before the next workshop.
Next
Workshop 4, Sharing AI Prototypes: A Production Pipeline, takes an app you built in AI Studio and publishes it on the web, so others can open it.
Examples
See prototypes made in this workshop on the Examples page.