Connect your agent

Exams Library For agents Connect your agent

How it connects

86 lessons across 5 courses, joined by 208 links where one lesson builds on another. Dashed lines cross between courses.

Drag to pull · scroll to zoom · click to open

Agent Foundations

Start from zero

Directing your agent

Design Engineering

How good interfaces think

Color, depth and surfaces

Layout and pages

Components and states

Spotting AI-default UI

The /design-engineering toolkit

Demos, Films and Sound

Icons, SVG and Diagrams

Launch Films with Agents

Your first film from HTML

Build a launch film with your agent

Sound, edits and the cuts that ship

What is design engineering?

What is an agent?

Set up your agent

What is a skill?

Install design-engineering

Connect your agent

Your first review

Taste is trained

Delight has a budget

States are the work

Say it precisely

The bundle is design

Should it move at all?

Duration and feedback

Entering and leaving

Morphs and swaps

Gestures, sheets and trays

Smooth, kind and checked

Color you can do math with

One neutral, one accent

Contrast you can read

Shadows, borders and corners

Designing a dark theme

Glass and layers

A type scale and its rhythm

Line length and tracking

When text runs out of room

Numbers, features and faces

Grouping by space

The page frame, on every screen

Layouts that survive real content

The phone's platform layer

The URL, structure and scroll position

Sticky headers and launch-ready pages

Every list has four states

A button has eight states

Forms that don't nag

Instant actions, undo and toasts

Keyboard, focus and touch

What screen readers hear, and the WCAG numbers

Words in the interface

Cards, icons, avatars and APIs

The thirty-second test

Real content beats fake proof

Copy that sounds generated

Code tells and leftovers

The unslop pass

Why fake UI looks fake

Framing the shot

Story, cursor and loops

Bento grids and rehearsal

An SVG is markup, not a picture

Making SVG move

Morphing shapes, and when not to

Stickers and mascots

Silence is the default

One family of sounds

Sound from motion

Playing and making sounds

Sound in launch films

Pick the register first

Words and product on screen

Cuts, seams and motion

Review, render and ship

Should you draw it?

Drawing the real mechanism

Editable canvases

Briefs that work

The review table

Options, tools and generators

Point, don't describe

Design contracts

Break it, then ship it

Routing the job

Make the skill yours

One command, many verbs

Verbs that judge

Verbs that make things