This series has covered four articles so far.
- What Is an AI Agent? — Context Window, Subagent, Skill, MCP
- Prompt Engineering vs. Context Engineering
- Harness Engineering
- Agentic Engineering and the PH-AH Loop
Understanding the concepts is one thing, but it doesn’t stick until you’ve done it with your own hands. This article walks through all four concepts, step by step, using one very simple example.
Haven’t installed an AI coding agent yet? Follow the environment setup guide first, and you can work through every example in this article in the same environment. If you’re already using a tool, feel free to just use that — none of what follows depends on a specific tool.
A note on images: this tutorial looks completely different depending on which AI agent tool you use, so instead of screenshots from one specific tool, each step includes the exact sentence you’d type and an example of what AI would likely respond with, as a code block. If you’re following along yourself, capturing a screenshot at each step is a good way to add real screenshots to this article later (a
[Screenshot placeholder]marker is left at the end of each step below).
Getting Ready
- What you need: any AI agent tool that can work with code (Claude Code, Codex, Cursor, and similar all work)
- What we’re building: a very simple web page that takes a day’s worth of expenses and shows the total by category plus the category you spent the most on
- Time: 40-50 minutes
- Before you start: create one empty folder on your computer (e.g.
budget-practice)
You don’t need to know how to program. The point of this tutorial isn’t to learn code — it’s to build the muscle memory for the procedure of collaborating with an AI agent.
Step 1. Context Engineering — Write the Rule File First
1-1. Open the folder and launch the agent
Launch your AI agent inside the budget-practice folder you created. (For Claude Code, run claude in the terminal; for Codex, run codex; for Cursor, open the folder and use the chat panel.)
[Screenshot placeholder: agent launched for the first time in the empty folder]
1-2. Ask it to create an AGENTS.md file
Type exactly this.
Create an AGENTS.md file. Put this content in it:
- Project description: this project builds a simple web page
that takes a day's expenses and shows the total per category
and which category was spent on the most.
- Backend is one Python file, frontend is one HTML file.
- Don't do anything I didn't explicitly ask for.
- I'll run the server myself, so don't auto-start it.AI will most likely respond something like this (exact wording varies by agent):
I'll create the AGENTS.md file.
[File creation permission request]
- Allow once
- Always allow: always allow Write for this session
- RejectWhen a permission prompt like this appears, choose Allow once or Always allow. It might feel unfamiliar the first time, but it’s just the agent checking with a person before it’s allowed to create a file — nothing to worry about.
1-3. Confirm the result
Open your file explorer (or the agent’s own view) and check that AGENTS.md actually got created, with the content you asked for.
[Screenshot placeholder: contents of the created AGENTS.md file]
This file is context engineering, covered in Part 2, in actual practice. Going forward, the AI will interpret every instruction in this project against this file.
Why this order matters: skip this file and go straight to “build me a budget app,” and you’ll have to re-explain the details every time, with the result shifting each time. Set the rules first, and every instruction after that gets shorter and more consistent.
Step 2. The PH-AH Loop — Get the Plan Confirmed First
2-1. Ask for a plan only — don’t ask for code yet
This is the Plan step of the PH-AH loop covered in Part 4. The key is not jumping straight to “build it.”
Come up with a plan for a screen where you enter expense
categories (food, transportation, entertainment, etc.) and it
shows the total and the highest-spend category. Don't write
any code yet — just tell me the order you'd build it in.Example plan response from AI:
Here's the order I'll follow:
1. Backend (main.py): build a simple API server with FastAPI
that stores expense entries and computes the total.
2. Frontend (index.html): build a form for entering expenses
(name, amount) and a display for the results (total,
highest-spend category).
3. Run the backend server and confirm it connects to the
frontend.
4. Enter 3-4 sample expenses myself to test that the
calculation is correct.
Should I proceed in this order?2-2. Review the plan, and fix anything off at this point
Read through the plan and ask questions. For example:
For step 2, make the category name selectable from a
predefined list (food/transportation/entertainment) instead
of free text — use a dropdown.Once AI revises the plan and shows it again, confirm it.
Good, go ahead with that plan.[Screenshot placeholder: the full plan AI presented]
Why you shouldn’t skip this step: skip plan confirmation and let AI go straight to code, and if the direction is wrong, you won’t find out until a lot of code already exists. A few minutes confirming the plan is far cheaper than rebuilding everything later.
Step 3. Confirming the Action — Review and Approve the Result
3-1. Ask it to execute
The plan is confirmed, so now have it actually build.
Build the backend (main.py) first, following the plan.Once AI writes the code, ask it to run the server next.
Run the server. Make sure code changes get picked up
automatically.3-2. Check it with your own eyes
Open the address you’re given in the browser (usually something like http://localhost:8000), enter 2-3 expenses yourself, and confirm the total comes out correctly.
Sample data to try
| Category | Amount |
|---|---|
| Food | $15.00 |
| Transportation | $3.00 |
| Food | $8.00 |
What you’re checking for: entering this should produce “Food total: $23.00, highest-spend category: Food” — exactly.
[Screenshot placeholder: the actual browser screen after entering expenses and seeing the result]
3-3. Report the result back to AI
If it works:
Confirmed, it works. Let's add the next feature.If there’s a problem, be specific on the spot:
The food total is wrong. 15 + 8 should be 23, but it's
showing 21. Please check the calculation logic.Repeating confirm the plan → confirm the execution for every feature, this way, is the PH-AH loop. You’ve now actually run through one full cycle (a plan step and an action step).
Step 4. Splitting Work Across Subagents
4-1. Ask it to create two Subagents
Apply the Subagent concept covered in Part 1. Split “building the screen” from “verifying the totals are correct.”
I want to create two Subagents for this project. One is a
"Screen" agent that only handles HTML screen work, and the
other is a "Verification" agent that only checks whether the
total-calculation logic has errors. Create a file defining
each role.Example AI response: depending on the agent, files like screen-agent.md and verify-agent.md get created inside a .agents/ folder, each containing that role’s description.
[Screenshot placeholder: the list and contents of the created Subagent files]
4-2. Have the Subagents handle a new feature, in order
Now add a new feature (showing each category’s percentage of spend), explicitly invoking the Subagents.
I want to add a feature showing each category's percentage
of total spend. Follow this order exactly:
1. The Screen agent adds the percentage display to the screen.
2. The Verification agent confirms the percentage
calculations are correct.Why splitting the work produces a more reliable result becomes clear once you compare it directly. Asking one agent to “build the screen and also verify the math” in one shot, versus splitting the roles, often produces a noticeably different level of thoroughness. Watch in particular whether the Verification agent actually checks the numbers and reports something specific, like “confirmed the three category percentages sum to 100%.”
Step 5. Saving Repeated Work as a Skill
5-1. Turn a request you’ll repeat into a single command
If you expect to keep asking for the same kind of expense summary, save it as a Skill, covered in Part 1.
Turn the request I just made — "this month's expense summary
+ top 3 categories" — into a single command (Skill) so I don't
have to explain it again every time.Example AI response:
Skill created. From now on you can just type:
/monthly-summary5-2. Confirm it actually got shorter
Try the new command.
/monthly-summaryConfirm that a request that used to need a long explanation is now one line.
[Screenshot placeholder: before/after comparison of using the Skill command]
Step 6. Adding a Harness Rule to Raise Reliability
6-1. Add a self-check rule to AGENTS.md
Finally, apply harness engineering, covered in Part 3. Up to now, a person has checked every result by hand — now add a rule that catches mistakes before they even reach you.
Add a rule to AGENTS.md: whenever you modify the total or
percentage calculation code, you must verify the result
against sample data after the change and report that
verification alongside the change. Don't report a task as
complete without that verification.6-2. Test that the rule actually kicks in
Ask it to modify the calculation logic once more.
Split transportation into public-transit and taxi categories
and total them separately.Before adding the rule, this is roughly how it would have ended.
Done. Updated it to total public transit and taxi separately.After adding the rule, you should see the verification come along with it, like this.
Done. Updated it to total public transit and taxi separately.
[Verification]
- Sample data: public transit $3.00 x 2, taxi $8.00 x 1
- Public transit total: $6.00 (manual check: 3 + 3 = 6 ✓)
- Taxi total: $8.00 (manual check: 8 = 8 ✓)
Verification passed.[Screenshot placeholder: response before vs. after adding the rule]
This is exactly how a harness raises the reliability of the output in practice.
Recap — What You Just Did
| Step | What you did | Concept |
|---|---|---|
| Step 1 | Predefined project rules with AGENTS.md | Context engineering |
| Step 2 | Confirmed the plan before any code was written | Agentic engineering (PH-AH loop, Plan) |
| Step 3 | Checked the execution result yourself before confirming | Agentic engineering (PH-AH loop, Action) |
| Step 4 | Split screen work and verification work by role | AI agent basics (Subagent) |
| Step 5 | Saved a repeated request as a single command | AI agent basics (Skill) |
| Step 6 | Added a rule banning completion reports without verification | Harness engineering |
Prompt engineering was in play the entire time, in the background — every single instruction you typed to AI throughout this tutorial was prompt engineering in practice.
5 More Challenges to Try
Once the budget app has given you a feel for it, try the challenges below, gradually raising the difficulty while repeating the same procedure (context → confirm plan → confirm execution → Subagent → Skill → harness). Listed in order of difficulty.
1. A to-do list app (Difficulty: Low)
A simple screen for adding and completing tasks. Structurally similar to the budget app, so it’s a good warm-up. Try splitting Subagents into a “Screen” agent and a “due-date alert” agent.
2. A multi-city weather summarizer (Difficulty: Low-Medium)
A tool that pulls weather for 3-4 predefined cities and formats it. Since “format it the same way every time” comes up repeatedly, this one is especially good for practicing Skills.
3. A reading log app (Difficulty: Medium)
An app that logs book titles, ratings, and one-line reviews, and shows monthly stats (most-read genre, etc.). Split Subagents into three — “logging,” “statistics,” and “recommendation” — and you’ll feel more concretely why “splitting roles produces more reliable results,” as covered in Part 1.
4. A team meeting-notes summarizer (Difficulty: Medium-High)
A tool that takes pasted meeting notes and sorts them into decisions and action items. Good for practicing strict harness rules — try a rule like “don’t report the summary as complete if you couldn’t clearly separate decisions from action items,” feed it an ambiguous meeting transcript, and see whether AI holds off on a judgment call on its own.
5. A website visitor-log analyzer (Difficulty: High)
A more challenging task, similar to one covered in the original harness-engineering material this series draws on. Build a tool that generates a mock log file (request time, response time), computes API response speed from it, and visualizes it as a chart. Try actually connecting an MCP, covered in Part 1 — for example, a browser-automation MCP that takes a screenshot of the finished chart — with the goal of bringing all four concepts from this series (basic agent structure, context, harness, the PH-AH loop) together in a single project.
What to Try Next
These exercises are a scaled-down version of real work. When you apply this to actual work:
- Put your team or company’s real rules into AGENTS.md
- Save recurring work patterns as Skills, one at a time
- The more important the task, the less you should skip the confirmation steps in the PH-AH loop
Work through these five concept-and-practice articles once, and the next time you use an AI agent on real work, instead of asking “why did it turn out like this,” you’ll find it easier to reach for “I need to give it more context here” or “this should be split into Subagents.”
AI Agent Series — Full Table of Contents
- (Part 0, before you start) Setting Up an AI Agent Practice Environment
- (1/5) What Is an AI Agent?
- (2/5) Prompt Engineering vs. Context Engineering
- (3/5) What Is Harness Engineering?
- (4/5) Agentic Engineering and the PH-AH Loop
- (5/5) Hands-On Practice With 4 AI Agent Concepts — you are here
Beyond the series — the two articles below aren’t part of this 5-part series, but pair well with it.