Your first review

This is the loop you will use for the rest of the course: build, review, fix, look. Here is the pricing card an agent made on its first try, and the review the skill wrote for it. Apply the fixes one at a time and watch the card change:

Every row was small. Together they turn a card that looks generated into one that looks considered. Now do it yourself, in your own project.

1. Ask for a pricing card

In your project folder, with your agent running, ask for something small enough to check at a glance:

Make a pricing card component for a "Pro" plan at $24/month: the plan name, the price, three features and two buttons, "Start free trial" and "Compare plans". Put it on a page I can open in the browser. Don't use the design-engineering skill yet.

The last line is on purpose. You want to see the agent's default first, so you can see what the review changes.

Open the page and take a screenshot. You will want it later.

2. Run the review

Now ask the skill to review what it made. Give it the file it just wrote:

$ /design-engineering review src/PricingCard.tsx

(Use whatever file name the agent created. With the plugin install, type /design-engineering:design-engineering review ….)

The review verb reads the code against a checklist of a few dozen common mistakes: animating everything, gray text that fails contrast, missing focus styles, buttons that do not respond to a press. It does not change anything yet. It reports.

3. Read the table

The review always comes back in the same shape: a Before / After / Why table. One row per problem.

Each column has a job:

1. Before

   The exact line from your code, quoted. So you can find it.

2. After

   The replacement. Same job, better result.

3. Why

   One sentence of reason. If the agent cannot say why in a sentence, the change is probably not worth making.

Read the Why column first. It is where you learn. After a few reviews you will start spotting these problems before the agent does.

4. Apply the fixes

Once you have read the table, ask the agent to apply it:

Apply every row of that review table except any you think is wrong for this card; tell me which you skipped and why. Then show me the page again.

Reviews only report; you decide what changes. That is on purpose: the skill keeps "judge" verbs like review separate from "do" verbs like polish, so nothing is changed behind your back.

5. Compare before and after

Open the page again and put it next to your screenshot from step 1. Look for:

Try the keyboard too: press Tab to move between the buttons. If you cannot see where you are, the focus row was skipped.

The loop

That is it: build, review, apply, look. It works on any screen, and the next modules teach you what each row in a review means, so you can direct the fixes yourself instead of only accepting them.