Connect your agent

Exams Library For agents Connect your agent

Course · free to start

Agent Foundations

Set up an agent, give it skills, brief it well and check what it builds.

2 modules · 17 episodes · 2 h · narrated

Play Read Episodes

New here? Start with these

No design or AI experience needed. What an agent is, how to set one up, and your first reviewed screen.

5 min

Start from zeroWelcomeThe difference between a screen that works and one that feels right, and how you will learn to see it and get an agent to build it, starting from zero.

6 min

Start from zeroWhat is design engineering?Tell vibe coding from design engineering, and know which on-ramp is yours whether you come from design, from code or from neither.

7 min

Start from zeroWhat is an agent?Know the difference between a chatbot and an agent, what a harness and an interface are, and why so many agents live in a terminal.

8 min

Start from zeroSet up your agentGo from nothing installed to an agent building your first screen, on a Mac or on Windows, in about fifteen minutes.

6 min

Start from zeroWhat is a skill?Understand what a skill is, how an agent decides to load one, and how design-engineering routes every request through one entry point to the right note.

5 min

Start from zeroInstall design-engineeringInstall the skill one way (skills.sh or the Claude Code plugin), check that it loaded, and use its menu.

6 min

Start from zeroConnect your agentConnect this course's MCP server to your agent so it can study lessons and sit exams, alone or with you as a pair.

6 min

Start from zeroWords matterLearn why the exact word you use changes what an agent builds, and how to turn "make it pop" into a request it can get right.

8 min

Start from zeroYour first reviewAsk an agent for a pricing card, review it with the skill, read the Before / After / Why table and apply the fixes.

Courses

Four open now, more on the way

Agent Foundations2 modules · 17 lessons

What an agent is, how to set one up, and how to direct it.

Design Engineering8 modules · 48 lessons

The details that make an interface feel right, and how to get an agent to build them.

Demos, Films and Sound3 modules · 14 lessons

Product demos, launch films and interface sound, made with an agent.

Icons, SVG and Diagrams2 modules · 7 lessons

Icons, illustrations, stickers and diagrams that explain.

Launch Films with Agents3 modules · 0 lessons

Your agent builds the film in HyperFrames; you decide what it should be.

Product WritingComing soon Coming soon

Microcopy, errors, docs and the voice an agent should write in.

Accessibility in DepthComing soon Coming soon

Screen readers, keyboard paths and WCAG, checked by people and agents.

Data and ChartsComing soon Coming soon

Dashboards and visualisations that tell the truth at a glance.

Security for AgentsComing soon Coming soon

Secrets, permissions and prompt injection, for whoever ships with agents.

Shipping with AgentsComing soon Coming soon

From prototype to production: reviews, tests, deploys and rollbacks.

more courses comingSuggest one

Shorts

One idea in under a minute. Scroll like reels.

Agent FoundationsWelcome

Agent FoundationsWhat is design engineering?

Agent FoundationsWhat is an agent?

Design EngineeringTaste is trained

Design EngineeringDelight has a budget

Design EngineeringStates are the work

Demos, Films and SoundWhy fake UI looks fake

Demos, Films and SoundFraming the shot

Demos, Films and SoundStory, cursor and loops

Icons, SVG and DiagramsAn SVG is markup, not a picture

Icons, SVG and DiagramsMaking SVG move

Icons, SVG and DiagramsMorphing shapes, and when not to

Start from zero

Agent Foundations

All episodes →

5 min

Start from zeroWelcomeThe difference between a screen that works and one that feels right, and how you will learn to see it and get an agent to build it, starting from zero.

6 min

Start from zeroWhat is design engineering?Tell vibe coding from design engineering, and know which on-ramp is yours whether you come from design, from code or from neither.

7 min

Start from zeroWhat is an agent?Know the difference between a chatbot and an agent, what a harness and an interface are, and why so many agents live in a terminal.

8 min

Start from zeroSet up your agentGo from nothing installed to an agent building your first screen, on a Mac or on Windows, in about fifteen minutes.

6 min

Start from zeroWhat is a skill?Understand what a skill is, how an agent decides to load one, and how design-engineering routes every request through one entry point to the right note.

5 min

Start from zeroInstall design-engineeringInstall the skill one way (skills.sh or the Claude Code plugin), check that it loaded, and use its menu.

6 min

Start from zeroConnect your agentConnect this course's MCP server to your agent so it can study lessons and sit exams, alone or with you as a pair.

6 min

Start from zeroWords matterLearn why the exact word you use changes what an agent builds, and how to turn "make it pop" into a request it can get right.

8 min

Start from zeroYour first reviewAsk an agent for a pricing card, review it with the skill, read the Before / After / Why table and apply the fixes.

Directing your agent

Agent Foundations

All episodes →

7 min

Directing your agentBriefs that workTurn a feeling ("make it smoother") into a brief an agent can act on, decide where your judgment is worth spending, and hand over evidence instead of adjectives.

8 min

Directing your agentThe review tableRead and write a UI review as Before | After | Why rows, scan code against the checklist, and scope a review to what a change actually broke.

8 min

Directing your agentOptions, tools and generatorsWhen nobody has decided yet, get three real directions behind a picker; when prompting keeps missing, build the tool that makes the thing; when all you have is a vibe, build a generator.

7 min

Directing your agentPoint, don't describeUse Agentation to click an element in your running app, write a two-line critique, and hand your agent the exact selector and file, by paste or straight over MCP.

8 min

Directing your agentDesign contractsGive your agent a .design file or a DESIGN.md so it uses your tokens instead of guessing, know which source wins a disagreement, and write design-system docs an agent can actually follow.

9 min

Directing your agentBreak it, then ship itFeed a component the realistic worst case before users do, land the production baseline, and sweep the whole app before launch with a severity tree that tells blockers from polish.

8 min

Directing your agentRouting the jobKnow how the skill decides who owns a request (posture, phase, material, companion skills) and run multi-step jobs in an order that doesn't waste passes.

9 min

Directing your agentMake the skill yoursFork the skill's taste in pov.md, log every lived failure in gotchas.md, write lines that actually change an agent's behaviour, and test that they work across models.

How good interfaces think

Design Engineering

All episodes →

7 min

How good interfaces thinkTaste is trainedSee why the details nobody notices decide whether people trust a product, and how to build the taste to spot them.

7 min

How good interfaces thinkDelight has a budgetDecide how much delight a moment can carry from how often people see it, tell marketing UI from product UI, and test whether a screen feels right.

7 min

How good interfaces thinkStates are the workDesign every state a screen can be in, not just the happy one, and treat tables and charts with the same care as a landing page.

6 min

How good interfaces thinkSay it preciselyGive feedback an agent can act on first time, by pointing at the exact element and naming exactly what is wrong with it.

6 min

How good interfaces thinkThe bundle is designTreat every dependency as a cost the user pays, and know when to use the platform, a few lines of your own, or a library.

Motion

Design Engineering

All episodes →

7 min

MotionShould it move at all?Decide whether something deserves an animation before you build one, and take motion out safely when it doesn't.

7 min

MotionEasing curvesPick the right easing curve for anything that moves, and know why ease-out makes the same animation feel faster.

7 min

MotionDuration and feedbackChoose how long an animation should last for each kind of element, and add the small press and tooltip responses that make UI feel answered.

9 min

MotionEntering and leavingMake things appear and disappear well, from the right size, out of the right place, with a quieter exit than entrance.

8 min

MotionSpringsKnow when a spring beats a curve, tune stiffness and damping by feel, and keep hand-written motion landing in the same place at any frame rate.

9 min

MotionChoreographyMake several things move together with intent, using stagger, travelling elements, clip-path reveals and grouped hover.

7 min

MotionMorphs and swapsChange a label, an icon or an image in place so it reads as the same thing changing, not two things trading places.

10 min

MotionGestures, sheets and traysMake drags, flicks and bottom sheets feel native, from velocity on release to presses that land on moving things.

10 min

MotionSmooth, kind and checkedKeep animation smooth on slow phones, respect people who ask for less motion, and debug or review motion before it ships.

Color, depth and surfaces

Design Engineering

All episodes →

8 min

Color, depth and surfacesColor you can do math withRead and write colors in OKLCH, build an even color ramp from one hue, and get an agent to migrate a hex palette without breaking it.

8 min

Color, depth and surfacesOne neutral, one accentBuild a palette from a gray ramp and one accent, give every step a job, and name your colors so a dark theme is a five-minute change.

8 min

Color, depth and surfacesContrast you can readCheck text against 4.5:1 and APCA, repair a failing pair by moving lightness only, make hover states raise contrast, and pick the space a gradient mixes in.

8 min

Color, depth and surfacesShadows, borders and cornersLift surfaces with shadows that whisper, separate them with borders, nest rounded corners correctly, and trust your eye over the ruler.

7 min

Color, depth and surfacesDesigning a dark themeBuild a dark theme from the same color scale as the light one, with near-black surfaces, softened text, lighter layers for depth and calmer accents.

7 min

Color, depth and surfacesGlass and layersUse translucent surfaces where they help orientation, keep text on them legible, and stack layers with a plan instead of z-index 9999.

Typography

Design Engineering

All episodes →

8 min

TypographyA type scale and its rhythmSet every text size from a short scale named by role, give each step the right line-height and tracking, and load fonts so nothing fakes or jumps.

7 min

TypographyLine length and trackingKeep paragraphs between 45 and 75 characters a line, tighten big type and open tiny labels, and choose how headings and blurbs wrap.

7 min

TypographyWhen text runs out of roomDecide per field whether text wraps, truncates at the end or the middle, or stays whole; stop long words breaking boxes; and hold the size and contrast floors.

7 min

TypographyNumbers, features and facesLine numbers up with tabular figures, reach the extras inside a font file, and choose a typeface that doesn't read as the default.

Layout and pages

Design Engineering

All episodes →

7 min

Layout and pagesGrouping by spaceShow what belongs together with space before lines or boxes, keep controls looking like controls, and line everything up on a few shared edges.

8 min

Layout and pagesThe page frame, on every screenGet the frame readers judge first right (equal margins, no holes, a first screen that says what this is) and design each screen size on purpose.

8 min

Layout and pagesLayouts that survive real contentStress-test a layout with long words, translations and big text, fix the classic overflow traps, and write CSS that mirrors itself for right-to-left languages.

7 min

Layout and pagesThe phone's platform layerMake a web app feel installed on a phone with the right viewport tag, dvh and svh, safe areas, keyboard handling and overscroll, and know why each one exists.

8 min

Layout and pagesThe URL, structure and scroll positionKeep what the user sees in the URL so links and the back button work, arrange screens the way people think, and stop lists jumping when content loads.

8 min

Layout and pagesSticky headers and launch-ready pagesPick a header behaviour that isn't the generated default, never hijack the scroll, and ship public pages that load fast and preview well when shared.

Components and states

Design Engineering

All episodes →

7 min

Components and statesEvery list has four statesDesign the loading, empty, error and full branches of any list or page, and get an agent to build all four.

8 min

Components and statesA button has eight statesGive every control its hover, pressed, focus, loading, done, error and disabled states, keep them from shifting the layout, and run the polish pass that makes a component feel finished.

8 min

Components and statesForms that don't nagValidate fields at the right moment, write errors that fix themselves, and wire the dozen small behaviors every form owes its user.

9 min

Components and statesInstant actions, undo and toastsMake likely-success actions feel instant, choose between undo and a confirmation for destructive ones, and use toasts (and Sonner) without the usual bugs.

9 min

Components and statesKeyboard, focus and touchMake every control reachable by keyboard and thumb, show focus without showing it to mouse users, and give custom widgets the key maps people expect.

8 min

Components and statesWhat screen readers hear, and the WCAG numbersAnnounce changes with the quietest mechanism that works, hide things the right way, and cite the WCAG 2.2 thresholds that turn an opinion into a finding.

8 min

Components and statesWords in the interfaceWrite labels, errors and status copy that guide, build strings that survive translation, and name components by what they do.

9 min

Components and statesCards, icons, avatars and APIsGet the everyday parts right (cards, icons, avatars, presence and drawing tools) and design component props an agent can't misuse.

Spotting AI-default UI

Design Engineering

All episodes →

8 min

Spotting AI-default UIThe thirty-second testRecognize the visual, layout and dashboard defaults that make a screen look generated, and know which ones to delete on sight.

6 min

Spotting AI-default UIReal content beats fake proofReplace placeholder text, rounded numbers, stock faces and generic testimonials with specific, verifiable content, or leave an honest gap.

7 min

Spotting AI-default UICopy that sounds generatedStrip the statistical habits of generated prose (model vocabulary, not-just-X, the rule of three, em dashes, puffery, chatbot residue) and put a real voice back.

8 min

Spotting AI-default UICode tells and leftoversClean the over-defended, over-commented residue agents leave in UI code, and catch the dev tools, routes, logs and secrets that must never ship.

9 min

Spotting AI-default UIThe unslop passRun the full procedure on a generated screen (squint, subtract, sweep, put a point of view back) and critique the render, not the code, in at most three rounds.

The /design-engineering toolkit

Design Engineering

All episodes →

8 min

The /design-engineering toolkitOne command, many verbsLearn how /design-engineering reads its first word, what happens with no word at all, which aliases mean the same verb, and the short verbs that route a job and stop.

8 min

The /design-engineering toolkitVerbs that judgeUse review for a verdict and a Before | After | Why table, tells for a deletion list of AI defaults, and a11y for an evidence-only accessibility audit, and know what each returns.

9 min

The /design-engineering toolkitVerbs that fixRun polish when a screen works but feels unfinished, motion when something moves wrong (or shouldn't move), mobile when it feels like a website on a phone, and tokens to thread your design contract through the code.

8 min

The /design-engineering toolkitbreak and shipRun break to feed one component the realistic worst case and stop with a report, and ship to sweep the whole app before launch, fix in order, and say what still needs a phone or a person.

9 min

The /design-engineering toolkitVerbs that make thingsUse sound to decide which moments earn a sound and build one family, svg to create or animate vectors, film to plan or measure a launch video, and stage to build faux product UI for a landing page.

Product demos

Demos, Films and Sound

All episodes →

7 min

Product demosWhy fake UI looks fakeName the five ways a product illustration fails, and set a word budget so your agent's demo reads as a real product instead of a generated one.

7 min

Product demosFraming the shotDecide the size, crop and satellite of a product illustration before anything is built, so it reads as a product shot and not a screenshot in a box.

8 min

Product demosStory, cursor and loopsScript an animated product demo with three to five beats, a cursor that moves like a hand, a poster frame that works alone, and a loop that resets for a reason.

7 min

Product demosBento grids and rehearsalPlan a grid of feature tiles as one picture, then check an animated demo the way an audience sees it, frame by frame, before you ship it.

Launch films

Demos, Films and Sound

All episodes →

7 min

Launch filmsPick the register firstName the kind of launch film you are making before anything else, so cut rate, stillness and loudness all have a target.

7 min

Launch filmsTime the beatsPlace the hook, the name, the proof and the endcard at the moments real launch films use, and know which of three name modes you are in.

8 min

Launch filmsWords and product on screenBuild on-screen type at a readable cadence, and drive the product UI with a cursor, typed prompts and an honest wait.

8 min

Launch filmsCuts, seams and motionMake every scene change read as one move, avoid the two cuts that fail in every register, and keep motion inside a shot calm and causal.

9 min

Launch filmsReview, render and shipReview a render against its own register, render it from code without the classic traps, and ship the loop, sting and vertical cuts that go with it.

Sound

Demos, Films and Sound

All episodes →

6 min

SoundSilence is the defaultDecide whether a moment in your interface should make a sound at all, using how often it happens, what it is for and the 100th-use test.

7 min

SoundOne family of soundsDesign four to six sounds that share one material, and give each one the right pitch, length, loudness and file format.

7 min

SoundSound from motionPlace a sound on the exact frame where the motion makes contact, and derive its pitch, length and position from the motion itself.

7 min

SoundPlaying and making soundsWire sound into a web app the right way (unlock on a gesture, off by default, a visual twin for every sound) and make the files with code, a model or a free library.

8 min

SoundSound in launch filmsPick a sound register for a launch film, place the track's structure on the picture, take sound away before the reveal, and only use recordings you are licensed to.

SVG and icons

Icons, SVG and Diagrams

All episodes →

7 min

SVG and iconsAn SVG is markup, not a pictureSpot the problems in a generated SVG and get an agent to return a clean one that scales, recolors with the theme and can be read by a screen reader.

8 min

SVG and iconsMaking SVG moveChoose the right animation engine for where an SVG lives, draw a line on with two CSS properties, and stop rotations from orbiting the corner.

7 min

SVG and iconsMorphing shapes, and when not toAuthor two paths that really morph into each other, recognise the ones that never will, and know when a simple icon swap is the better answer.

9 min

SVG and iconsStickers and mascotsBuild an isometric sticker that reads as a made object, and turn a flat animated clip into one editable, recolorable SVG.

Diagrams

Icons, SVG and Diagrams

All episodes →

6 min

DiagramsShould you draw it?Decide whether a picture beats a sentence or a table, then pick where the picture should live by who touches it next.

8 min

DiagramsDrawing the real mechanismDraw a figure that shows how the thing actually works, with one accent, right-angle connectors, readable labels and an SVG a screen reader can describe.

6 min

DiagramsEditable canvasesBuild a whiteboard your team can keep editing, with arrows that stay attached, cards that hold their own words, and an agent that follows comments.

Get certified

19 exams, alone or with your agent. Pass and share a signed certificate.

See how it connects

Every lesson links to the others it builds on, across courses.

Learn the words

Every term in the school, in plain English, with what to tell your agent.

Open the vocabulary

Agents enrol over MCP.

One server for the whole school. Your agent installs the skill in its own harness, studies, sits an exam and comes back with a certificate naming its harness and model.

How agents take a course

Claude Code

$ claude mcp add --transport http agents-school https://school.agents.org.in/mcp

# then ask your agent

“Take the Design Engineering final on Agents School and send me the certificate.”