# Design Engineering > A free course for people and agents who build UI with AI. Start from zero, learn the words and the craft, take an exam on your own or with your agent, and get certified. A free course at https://school.agents.org.in, built on the open design-engineering skill (AgentsORG/design-engineering 3.3.1). Every lesson is available as markdown by adding `.md` to its URL. ## For agents - MCP server (streamable HTTP, no auth): https://school.agents.org.in/mcp — tools: list_modules, get_lesson, search_skill, get_skill_install, get_skill_file, list_exams, start_exam, submit_exam, verify_certificate - Install the skill: `npx skills add AgentsORG/design-engineering` (or the Claude Code plugin `design-engineering@agentsorg`) - Exams: call `start_exam` with an exam id (`quiz:`, `exam:`, `final:`) and a candidate, answer, then `submit_exam`. Passing returns a signed certificate URL. - REST mirror: https://school.agents.org.in/openapi.json - Every skill node: https://school.agents.org.in/skill//.md ## Agent Foundations Set up an agent, give it skills, brief it well and check what it builds. Certificate: Certified in Agent Foundations (exam final-foundations). https://school.agents.org.in/foundations ### Start from zero Set up an AI agent, give it the design-engineering skill and get your first screen reviewed. - [Welcome](https://school.agents.org.in/foundations/start/welcome.md): The 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. - [What is design engineering?](https://school.agents.org.in/foundations/start/what-is-design-engineering.md): Tell vibe coding from design engineering, and know which on-ramp is yours whether you come from design, from code or from neither. - [What is an agent?](https://school.agents.org.in/foundations/start/what-is-an-agent.md): 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. - [Set up your agent](https://school.agents.org.in/foundations/start/set-up-your-agent.md): Go from nothing installed to an agent building your first screen, on a Mac or on Windows, in about fifteen minutes. - [What is a skill?](https://school.agents.org.in/foundations/start/what-is-a-skill.md): 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. - [Install design-engineering](https://school.agents.org.in/foundations/start/install-design-engineering.md): Install the skill one way (skills.sh or the Claude Code plugin), check that it loaded, and use its menu. - [Connect your agent](https://school.agents.org.in/foundations/start/connect-your-agent.md): Connect this course's MCP server to your agent so it can study lessons and sit exams, alone or with you as a pair. - [Words matter](https://school.agents.org.in/foundations/start/words-matter.md): Learn 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. - [Your first review](https://school.agents.org.in/foundations/start/your-first-review.md): Ask an agent for a pricing card, review it with the skill, read the Before / After / Why table and apply the fixes. ### Directing your agent Brief, review and check an agent's UI work with prototypes, design files and tools. - [Briefs that work](https://school.agents.org.in/foundations/agents/briefs-that-work.md): Turn 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. - [The review table](https://school.agents.org.in/foundations/agents/the-review-table.md): Read 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. - [Options, tools and generators](https://school.agents.org.in/foundations/agents/options-and-tools.md): When 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. - [Point, don't describe](https://school.agents.org.in/foundations/agents/point-with-agentation.md): Use 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. - [Design contracts](https://school.agents.org.in/foundations/agents/design-contracts.md): Give 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. - [Break it, then ship it](https://school.agents.org.in/foundations/agents/break-then-ship.md): Feed 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. - [Routing the job](https://school.agents.org.in/foundations/agents/routing-the-job.md): Know 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. - [Make the skill yours](https://school.agents.org.in/foundations/agents/make-it-yours.md): Fork 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. ## Design Engineering Judge and direct motion, color, type, layout and components like a design engineer. Certificate: Certified Design Engineer (exam final-design). https://school.agents.org.in/design ### How good interfaces think Explain why some interfaces feel right and others feel generated. - [Taste is trained](https://school.agents.org.in/design/philosophy/taste-is-trained.md): See why the details nobody notices decide whether people trust a product, and how to build the taste to spot them. - [Delight has a budget](https://school.agents.org.in/design/philosophy/delight-has-a-budget.md): Decide 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. - [States are the work](https://school.agents.org.in/design/philosophy/states-are-the-work.md): Design 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. - [Say it precisely](https://school.agents.org.in/design/philosophy/say-it-precisely.md): Give feedback an agent can act on first time, by pointing at the exact element and naming exactly what is wrong with it. - [The bundle is design](https://school.agents.org.in/design/philosophy/the-bundle-is-design.md): Treat 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 Decide whether something should move, then pick the timing, easing and spring. - [Should it move at all?](https://school.agents.org.in/design/motion/should-it-move.md): Decide whether something deserves an animation before you build one, and take motion out safely when it doesn't. - [Easing curves](https://school.agents.org.in/design/motion/easing.md): Pick the right easing curve for anything that moves, and know why ease-out makes the same animation feel faster. - [Duration and feedback](https://school.agents.org.in/design/motion/duration-and-feedback.md): Choose how long an animation should last for each kind of element, and add the small press and tooltip responses that make UI feel answered. - [Entering and leaving](https://school.agents.org.in/design/motion/enter-and-exit.md): Make things appear and disappear well, from the right size, out of the right place, with a quieter exit than entrance. - [Springs](https://school.agents.org.in/design/motion/springs.md): Know 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. - [Choreography](https://school.agents.org.in/design/motion/choreography.md): Make several things move together with intent, using stagger, travelling elements, clip-path reveals and grouped hover. - [Morphs and swaps](https://school.agents.org.in/design/motion/morphs.md): Change a label, an icon or an image in place so it reads as the same thing changing, not two things trading places. - [Gestures, sheets and trays](https://school.agents.org.in/design/motion/gestures.md): Make drags, flicks and bottom sheets feel native, from velocity on release to presses that land on moving things. - [Smooth, kind and checked](https://school.agents.org.in/design/motion/performance-and-review.md): Keep animation smooth on slow phones, respect people who ask for less motion, and debug or review motion before it ships. ### Color, depth and surfaces Build a color system in OKLCH, with shadows, borders and dark mode that hold up. - [Color you can do math with](https://school.agents.org.in/design/surface/oklch.md): Read 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. - [One neutral, one accent](https://school.agents.org.in/design/surface/palette.md): Build 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. - [Contrast you can read](https://school.agents.org.in/design/surface/contrast.md): Check 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. - [Shadows, borders and corners](https://school.agents.org.in/design/surface/shadows-and-corners.md): Lift surfaces with shadows that whisper, separate them with borders, nest rounded corners correctly, and trust your eye over the ruler. - [Designing a dark theme](https://school.agents.org.in/design/surface/dark-mode.md): Build 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. - [Glass and layers](https://school.agents.org.in/design/surface/glass-and-layers.md): Use translucent surfaces where they help orientation, keep text on them legible, and stack layers with a plan instead of z-index 9999. ### Typography Set type that reads well: scale, rhythm, line length and the small OpenType details. - [A type scale and its rhythm](https://school.agents.org.in/design/typography/type-scale.md): Set 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. - [Line length and tracking](https://school.agents.org.in/design/typography/line-length.md): Keep paragraphs between 45 and 75 characters a line, tighten big type and open tiny labels, and choose how headings and blurbs wrap. - [When text runs out of room](https://school.agents.org.in/design/typography/when-text-runs-out.md): Decide 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. - [Numbers, features and faces](https://school.agents.org.in/design/typography/numbers-and-faces.md): Line 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 Lay out pages that group by space, survive long content and work on every screen. - [Grouping by space](https://school.agents.org.in/design/layout/grouping-by-space.md): Show what belongs together with space before lines or boxes, keep controls looking like controls, and line everything up on a few shared edges. - [The page frame, on every screen](https://school.agents.org.in/design/layout/page-frame.md): Get 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. - [Layouts that survive real content](https://school.agents.org.in/design/layout/growth-and-overflow.md): Stress-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. - [The phone's platform layer](https://school.agents.org.in/design/layout/mobile-layer.md): Make 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. - [The URL, structure and scroll position](https://school.agents.org.in/design/layout/url-and-structure.md): Keep 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. - [Sticky headers and launch-ready pages](https://school.agents.org.in/design/layout/sticky-and-launch.md): Pick 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 Build components with every state, keyboard path and accessible name accounted for. - [Every list has four states](https://school.agents.org.in/design/components/four-states.md): Design the loading, empty, error and full branches of any list or page, and get an agent to build all four. - [A button has eight states](https://school.agents.org.in/design/components/button-states.md): Give 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. - [Forms that don't nag](https://school.agents.org.in/design/components/forms.md): Validate fields at the right moment, write errors that fix themselves, and wire the dozen small behaviors every form owes its user. - [Instant actions, undo and toasts](https://school.agents.org.in/design/components/optimistic-and-undo.md): Make likely-success actions feel instant, choose between undo and a confirmation for destructive ones, and use toasts (and Sonner) without the usual bugs. - [Keyboard, focus and touch](https://school.agents.org.in/design/components/keyboard-and-touch.md): Make every control reachable by keyboard and thumb, show focus without showing it to mouse users, and give custom widgets the key maps people expect. - [What screen readers hear, and the WCAG numbers](https://school.agents.org.in/design/components/announcements-and-wcag.md): Announce 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. - [Words in the interface](https://school.agents.org.in/design/components/words-in-the-ui.md): Write labels, errors and status copy that guide, build strings that survive translation, and name components by what they do. - [Cards, icons, avatars and APIs](https://school.agents.org.in/design/components/parts.md): Get the everyday parts right (cards, icons, avatars, presence and drawing tools) and design component props an agent can't misuse. ### Spotting AI-default UI Find and delete the tells that make UI, code and copy look generated. - [The thirty-second test](https://school.agents.org.in/design/tells/the-thirty-second-test.md): Recognize the visual, layout and dashboard defaults that make a screen look generated, and know which ones to delete on sight. - [Real content beats fake proof](https://school.agents.org.in/design/tells/real-content.md): Replace placeholder text, rounded numbers, stock faces and generic testimonials with specific, verifiable content, or leave an honest gap. - [Copy that sounds generated](https://school.agents.org.in/design/tells/copy-tells.md): Strip 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. - [Code tells and leftovers](https://school.agents.org.in/design/tells/code-and-leaks.md): Clean the over-defended, over-commented residue agents leave in UI code, and catch the dev tools, routes, logs and secrets that must never ship. - [The unslop pass](https://school.agents.org.in/design/tells/the-unslop-pass.md): Run 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 Run the right verb (review, polish, motion, ship and the rest) at the right moment. - [One command, many verbs](https://school.agents.org.in/design/toolkit/meet-the-toolkit.md): Learn 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. - [Verbs that judge](https://school.agents.org.in/design/toolkit/verbs-that-judge.md): Use 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. - [Verbs that fix](https://school.agents.org.in/design/toolkit/verbs-that-fix.md): Run 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. - [break and ship](https://school.agents.org.in/design/toolkit/break-and-ship.md): Run 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. - [Verbs that make things](https://school.agents.org.in/design/toolkit/verbs-that-make.md): Use 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. ## Demos, Films and Sound Make faux product UI, plan and review a launch film, and design a sound family. Certificate: Certified in Demos, Films and Sound (exam final-media). https://school.agents.org.in/media ### Product demos Make faux product UI (heroes, feature cards, cursor demos) that reads as the real thing. - [Why fake UI looks fake](https://school.agents.org.in/media/faux-ui/why-fake-ui-looks-fake.md): Name 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. - [Framing the shot](https://school.agents.org.in/media/faux-ui/framing-the-shot.md): Decide 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. - [Story, cursor and loops](https://school.agents.org.in/media/faux-ui/story-and-cursor.md): Script 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. - [Bento grids and rehearsal](https://school.agents.org.in/media/faux-ui/bento-and-rehearsal.md): Plan 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 Plan, cut and review a product launch film. - [Pick the register first](https://school.agents.org.in/media/film/register-first.md): Name the kind of launch film you are making before anything else, so cut rate, stillness and loudness all have a target. - [Time the beats](https://school.agents.org.in/media/film/beats.md): Place 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. - [Words and product on screen](https://school.agents.org.in/media/film/words-and-product.md): Build on-screen type at a readable cadence, and drive the product UI with a cursor, typed prompts and an honest wait. - [Cuts, seams and motion](https://school.agents.org.in/media/film/cuts-and-seams.md): Make 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. - [Review, render and ship](https://school.agents.org.in/media/film/review-and-ship.md): Review 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 Decide which moments earn a sound, then design and wire one family. - [Silence is the default](https://school.agents.org.in/media/sound/silence-is-the-default.md): Decide 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. - [One family of sounds](https://school.agents.org.in/media/sound/one-family-of-sounds.md): Design four to six sounds that share one material, and give each one the right pitch, length, loudness and file format. - [Sound from motion](https://school.agents.org.in/media/sound/sound-from-motion.md): Place a sound on the exact frame where the motion makes contact, and derive its pitch, length and position from the motion itself. - [Playing and making sounds](https://school.agents.org.in/media/sound/sound-on-the-web.md): Wire 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. - [Sound in launch films](https://school.agents.org.in/media/sound/sound-in-launch-films.md): Pick 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. ## Icons, SVG and Diagrams Create and animate clean SVG, and decide when a diagram helps. Certificate: Certified in Icons, SVG and Diagrams (exam final-visual). https://school.agents.org.in/visual ### SVG and icons Create, clean and animate SVG icons and illustrations. - [An SVG is markup, not a picture](https://school.agents.org.in/visual/svg/clean-svg.md): Spot 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. - [Making SVG move](https://school.agents.org.in/visual/svg/animating-svg.md): Choose the right animation engine for where an SVG lives, draw a line on with two CSS properties, and stop rotations from orbiting the corner. - [Morphing shapes, and when not to](https://school.agents.org.in/visual/svg/path-morphing.md): Author 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. - [Stickers and mascots](https://school.agents.org.in/visual/svg/stickers-and-flipbooks.md): Build an isometric sticker that reads as a made object, and turn a flat animated clip into one editable, recolorable SVG. ### Diagrams Decide whether a picture helps, then draw one that shows the real mechanism. - [Should you draw it?](https://school.agents.org.in/visual/diagrams/should-you-draw-it.md): Decide whether a picture beats a sentence or a table, then pick where the picture should live by who touches it next. - [Drawing the real mechanism](https://school.agents.org.in/visual/diagrams/drawing-the-mechanism.md): Draw 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. - [Editable canvases](https://school.agents.org.in/visual/diagrams/editable-canvases.md): Build a whiteboard your team can keep editing, with arrows that stay attached, cards that hold their own words, and an agent that follows comments. ## Launch Films with Agents Ship a launch film from HTML with your agent: spec, real UI, seams, sound and every format. Certificate: Certified Launch Film Maker (exam final-launch). https://school.agents.org.in/launch ### Your first film from HTML Install HyperFrames in your agent, read a composition and render a clean ten-second film. ### Build a launch film with your agent Take a launch film from three storylines to a spec, real product UI, catalog blocks, seams and brand. ### Sound, edits and the cuts that ship Let the voice set the cut, edit with a person in the loop, re-brand a template and ship every format. ## Optional - [Full course in one file](https://school.agents.org.in/llms-full.txt) - [Vocabulary](https://school.agents.org.in/vocabulary) - [The skill, node by node](https://school.agents.org.in/skill)