189 lines
5.0 KiB
Markdown
189 lines
5.0 KiB
Markdown
# Module 14: Agentic Development
|
|
|
|
## Lesson 2: Evaluation and Feedback
|
|
|
|
**Staying in control as the agent builds**
|
|
|
|
---
|
|
|
|
## The Step Is Done. Now What?
|
|
|
|
The agent completed a step. You have output — code, a component, a visual.
|
|
|
|
Now is the most important moment: **evaluation**.
|
|
|
|
This is where you, the designer, earn your keep. The AI builds fast. You decide if what it built is right.
|
|
|
|
---
|
|
|
|
## The Evaluation Cycle
|
|
|
|
After every step:
|
|
|
|
### 1. Compare to Intent
|
|
|
|
Does the output match what you asked for?
|
|
|
|
- Check against the specification
|
|
- Check against the test protocol
|
|
- Look at it with fresh eyes — not just technically correct, but does it *feel* right?
|
|
|
|
### 2. Give Feedback
|
|
|
|
Tell the agent specifically what's wrong or right. The more precise your feedback, the better the next iteration.
|
|
|
|
### 3. Update the Plan
|
|
|
|
Based on what you learned, adjust:
|
|
|
|
- **Reprioritize** — this task turned out to be more important
|
|
- **Add tasks** — something new emerged
|
|
- **Remove tasks** — this is no longer needed
|
|
- **Split tasks** — this was too big, break it down
|
|
- **Shuffle order** — the sequence should change
|
|
|
|
---
|
|
|
|
## Giving Effective Feedback
|
|
|
|
### Bad Feedback
|
|
|
|
> "This doesn't look right."
|
|
|
|
The agent doesn't know what "right" means. It will guess, probably wrong.
|
|
|
|
### Good Feedback
|
|
|
|
> "The spacing between the form fields is too tight. The spec says 16px between fields, this looks like 8px. Also, the submit button should be full-width, not centered at 200px."
|
|
|
|
Specific. Referenced to spec. Actionable.
|
|
|
|
### Better Feedback
|
|
|
|
> "Two issues:
|
|
> 1. Field spacing: spec says 16px gap, implementation has 8px. Fix to 16px.
|
|
> 2. Submit button: spec says full-width (100%), implementation is 200px centered. Fix to 100%.
|
|
>
|
|
> Everything else looks correct. Proceed to next step after fixing."
|
|
|
|
Numbered. Clear priority. Confirms what's correct too.
|
|
|
|
---
|
|
|
|
## What to Evaluate
|
|
|
|
### Against Specification
|
|
|
|
| Check | Question |
|
|
|-------|----------|
|
|
| Content | Does text match spec exactly? |
|
|
| Layout | Are elements positioned correctly? |
|
|
| States | Are all states present and correct? |
|
|
| Behavior | Do interactions work as specified? |
|
|
| Styling | Do colors, fonts, spacing match tokens? |
|
|
|
|
### Against Intent
|
|
|
|
Not everything is in the spec. Use your design judgment:
|
|
|
|
- Does the visual hierarchy feel right?
|
|
- Is the flow natural?
|
|
- Would a user understand this immediately?
|
|
- Does it match the persona's needs?
|
|
|
|
### Against Quality
|
|
|
|
- Accessibility: contrast, focus states, touch targets
|
|
- Responsiveness: does it work on all sizes?
|
|
- Performance: is it smooth?
|
|
|
|
---
|
|
|
|
## Re-evaluating the Plan
|
|
|
|
After evaluation, open the Agent Dialog and update the task list.
|
|
|
|
**Before step 3:**
|
|
```markdown
|
|
## Tasks
|
|
1. [x] Create form layout
|
|
2. [x] Add validation
|
|
3. [ ] Implement error states
|
|
4. [ ] Loading and success states
|
|
5. [ ] Responsive adjustments
|
|
6. [ ] Accessibility pass
|
|
```
|
|
|
|
**After step 3 revealed mobile layout issues:**
|
|
```markdown
|
|
## Tasks
|
|
1. [x] Create form layout
|
|
2. [x] Add validation
|
|
3. [x] Implement error states
|
|
4. [ ] Fix mobile layout for error messages ← NEW
|
|
5. [ ] Loading and success states
|
|
6. [ ] Responsive adjustments
|
|
7. [ ] Accessibility pass
|
|
8. [ ] Revisit password strength on mobile ← NEW (from step 2 learning)
|
|
```
|
|
|
|
The plan grows and shrinks. That's normal.
|
|
|
|
---
|
|
|
|
## When Output Is Wrong
|
|
|
|
Three common situations:
|
|
|
|
### 1. Spec Divergence
|
|
|
|
The output doesn't match the spec.
|
|
|
|
**Action:** Point to the specific spec section. Ask the agent to fix it.
|
|
|
|
> "The spec says the error message appears below the field, but it's rendering as a toast notification. Fix to inline below-field as per spec section 4.2."
|
|
|
|
### 2. Spec Was Wrong
|
|
|
|
Building revealed the spec needs updating.
|
|
|
|
**Action:** Update the spec first, then continue building.
|
|
|
|
> "The spec says inline validation on keypress, but that's too aggressive. Updating spec to blur-based validation. Continue with updated approach."
|
|
|
|
### 3. Better Idea
|
|
|
|
The agent or you discovered a better approach during building.
|
|
|
|
**Action:** Document the improvement, update spec, continue.
|
|
|
|
> "The agent suggested a shake animation on error instead of just red text. That's better UX. Updating spec to include shake. Document as intentional improvement."
|
|
|
|
---
|
|
|
|
## The Evaluation Mindset
|
|
|
|
Think of yourself as a creative director reviewing work:
|
|
|
|
- **Be specific** — point to exact elements
|
|
- **Be decisive** — approve or reject, don't waffle
|
|
- **Be efficient** — one round of feedback per step, not five
|
|
- **Confirm what's right** — not just what's wrong
|
|
- **Think strategically** — does this serve the user, the persona, the business goal?
|
|
|
|
---
|
|
|
|
## What's Next
|
|
|
|
In the next lesson, you'll learn what to do when things go wrong — when the agent can't solve the problem and you need to troubleshoot or escalate.
|
|
|
|
---
|
|
|
|
**[Continue to Lesson 3: When You Get Stuck →](lesson-03-when-you-get-stuck.md)**
|
|
|
|
---
|
|
|
|
[← Back to Lesson 1](lesson-01-iterative-building.md) | [Back to Module Overview](module-14-agentic-development-overview.md)
|
|
|
|
*Part of Module 14: Agentic Development*
|