Teaching AI Agents by Example, Not Code

#showdev #webdev #ai #automation

The Shift from Code to Demonstration

We've been teaching computers the wrong way. For decades, we've been writing explicit instructions—line after line of code—telling machines exactly what to do. But humans don't learn this way, and increasingly, AI agents don't need to either.

The Problem with Instruction-Based Learning

Traditional programming requires:

Precise specifications — Every edge case must be anticipated
Brittle selectors — CSS classes and DOM paths that break on every UI update
Domain expertise — Only developers can create automation
Maintenance burden — Constant updates as target systems evolve

The result? We spend more time maintaining automation than benefiting from it.

Learning by Demonstration

Consider how you'd teach a new employee to use your internal CRM:

You wouldn't give them a 50-page API specification
You wouldn't make them memorize CSS selectors
You'd simply show them how to do it

You'd walk them through:

Log in here
Click this button
Fill out these fields
Submit the form
If this error appears, do that

This is exactly how AI agents should learn.

The Demonstration Pipeline

Modern AI makes demonstration-based learning possible:

Computer Vision identifies UI elements by appearance and context—not just DOM position.

Large Language Models understand the intent behind actions and can generalize patterns.

Structured Formats like SKILL.md capture workflows in a way that's both human-readable and machine-executable.

Real-World Example

Instead of writing this brittle automation:

// This breaks every time the UI updates
await page.click('#submit-btn-primary');
await page.fill('#email-input-field', 'user@example.com');

You record yourself performing the task once. The AI extracts:

## Goal
Submit contact form

## Workflow
1. Navigate to /contact
2. Locate the contact form
3. Fill in required fields (name, email, message)
4. Submit the form
5. Confirm success

## UI Elements to Look For
- Form with input fields
- Submit button (typically primary CTA)
- Success message or confirmation

## Error Handling
- If validation fails, check required field indicators
- If submission fails, retry once after 5 seconds

The difference? This skill survives UI redesigns because it describes what to accomplish, not where to click.

Implications for Developers

This shift changes everything:

No more selector maintenance — Skills work across UI updates
Domain experts can contribute — No coding required to create automation
Faster iteration — Record once, deploy everywhere
Knowledge capture — Institutional knowledge preserved in executable form