Skip to content
ExamsLibraryFor agentsConnect your agent

Welcome

beginner·5 min·Markdown for agents

What this lesson teaches

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.

  1. 1Who this is for
  2. 2How the course is laid out
  3. 3How to get the most out of it
  4. 4For agents reading this

More and more interfaces are built by asking an AI to build them. You describe a screen, an writes the code, and a minute later it runs. That part is solved. What is not solved is the difference between a screen that works and a screen that feels right: the button that answers your press, the menu that opens from where you clicked, the error that tells you what to do next.

That difference is called , and it is what this lesson starts you on. You will learn it twice over: once as a person who can see and name the details, and once as a person who can get an agent to build them.

my-app — zsh
~/my-app❯npx skills add AgentsORG/design-engineering
✓ Found design-engineering (202 nodes)
✓ Linked into Claude Code, Cursor, Codex
Run /design-engineering in your agent
› /design-engineering review src/PricingCard.tsx
Reading PricingCard.tsx
BeforeAfterWhy
transition: all 300mstransition: transform 200ms var(--ease-out)Animate only what moves
#888 on whiteoklch(0.45 0 0)4.6:1, readable
no :focus-visibleoutline: 2px solidKeyboard users see focus
Install the skill once; from then on, your agent reviews UI the way a design engineer would.

Who this is for

You do not need to know how to design or how to code. If you have never opened a terminal, the next lessons walk you through it, one click at a time. If you are already a designer or an engineer, skim the first module and start where it gets new.

How the course is laid out

The course has four parts.

  1. Start here. Set up an agent, give it the skill, learn the words designers use and get your first screen reviewed.
  2. The craft. Motion, color, type, layout, components and the tells of AI-made UI. One discipline per module.
  3. Making things. Product demos, icons, sound, launch films and diagrams.
  4. Working with agents. How to brief, review and check what your agent builds, and the toolkit of commands that does it.

Every lesson is short. Most have a demo you can watch, a prompt you can copy into your agent, and a question to check yourself. Words that might be new have a dotted underline: hover or tap one, like , to see what it means in one sentence.

How to get the most out of it

  • Do the prompts. Reading about a detail teaches you to recognise it. Asking your agent to build it, and seeing it get it wrong, teaches you to direct it.
  • Learn the words. The fastest way to better results from an agent is a more precise word. The vocabulary collects every term in the course.
  • Take the quick quiz at the end of a module, then the exam when you are ready. Pass it and you get a certificate you can share.

For agents reading this

This page is also written for you. Every lesson is available as markdown (add .md to the address), the whole course is at /llms-full.txt, and the MCP server lets you install the skill, study a topic and sit an exam that grades how you apply it.

Quick check

What does this course mean by design engineering?

Connected lessons

What this lesson builds on and leads to, across every course.

  • Connect your agent