Agents are good at turning an idea into a file, so that’s where we start.

Describe your idea in a sentence or two and the agent writes the file. You get to read it before it’s saved.

The first version is rarely right. When you ask for a change, say which file it’s for, as in “add a Getting started section to README.md”. Otherwise the agent may pick the wrong one.

Try it

1. The project is empty. Press Type it, then Enter, or describe the idea in your own words.
2. Read the diff and choose Yes. Press Run to see README.md as a page.
3. Ask for one change to README.md, or open it in the Editor tab and change it yourself.
4. If the agent goes for the wrong file, choose No and name the file in your next message.

The agent can read code and tell you what it does. It’s a quick way to get to know a project you didn’t write.

Attach the file with @. The agent then answers from the file itself instead of from what it remembers about similar pages.

Then run the page and check the answer yourself.

Try it

1. The project has one file, index.html. You can open it in the Editor tab if you like.
2. Press Type it, then Enter. The agent answers without changing anything.
3. Press Run. Type a bill and click a button. Does the page do what the agent said?
4. If part of the answer is unclear or wrong, ask about it: “Which line shows the tip?”

The agent can also change a file you already have. A good change is small and touches only what you asked for.

It has two ways to change a file.

The agent’s tool	What it does	The diff shows
Update	replaces a few lines	a few new lines, the rest untouched
Write	writes the whole file again	every line, even the ones that didn’t change

A small edit is easy to read, and it can’t accidentally break the rest of the page. That’s what “Change nothing else” in the prompt is for.

Try it

1. Press Type it, then Enter.
2. Read the diff before you choose. It should add a line or two and remove nothing. If the agent rewrites the file, choose No and say “Only add the button.”
3. Press Run. Enter 200 as the bill and click 20%. The tip should be 40. Click 15% and it should still be 30.

The agent can find and fix a bug. You don’t need to know where the bug is, only what’s wrong.

A good bug report says two things:

Part	Example
What you saw	2 + 3 shows 23
What you expected	5

“It’s broken” gives the agent nothing to go on. “Shows 23 instead of 5” points it right at the bug.

Try it

1. Press Run, type 2 and 3, and click Add to see the bug for yourself.
2. Press Type it, then Enter. The agent reads index.html and suggests a fix.
3. Read the diff. A good fix changes a line or two. Choose Yes.
4. Press Run and try 2 + 3 again. If it’s still wrong, tell the agent what you see now.

Now build one small page on your own, using what the earlier labs showed you.

Step	How
Plan	shift+tab to plan mode, then ask
Write	approve the plan, read the diff, choose Yes
Check	Run, then click + and Reset
Fix	say what you saw and what you expected
Change	ask for one small change, name the file, add “Change nothing else”

Try it

1. The project is empty. Press shift+tab until the status line says plan mode.
2. Press Type it, then Enter. Read the plan and choose Yes, and manually approve edits.
3. Read the diff for index.html, then choose Yes.
4. Press Run. Click + three times, then Reset.
5. If something’s wrong, tell the agent what you saw. Then ask for a change of your own, such as a − button.