# Build One Part From Start to Finish

Follow one small component, a slider, from the first request to the finished version. You will see every step, the mistakes that usually happen, and how to fix them.

Made by [HorizonX](https://horizonx.so/), a library of UI kits, components and templates for people who build with AI.

You can copy the requests, templates and checklists in this guide into your own projects, including client work and paid work. Please do not republish the whole guide. Link to it instead.

## Why one small part?

Beginners often ask for a whole website at once. When something breaks, they do not know where. If you learn the full process with one small part, you can repeat it for anything.

We use a **slider**: a bar with a handle that you drag to choose a number. It looks simple, but it has everything: design, states, mouse, touch, keyboard and phone sizes.

## The six steps

1. Write the request.
2. Let the agent ask questions.
3. Build the first version.
4. Check it yourself.
5. Ask for fixes, one at a time.
6. Check again and call it done.

## Step 1: Write the request

> Build a slider component called EffortSlider. It lets the user choose a number from 0 to 100. Show the current number above the handle. The track is 4 pixels high, light grey. The filled part and the handle use our accent color. The handle is a 20-pixel circle. It must work with a mouse, a finger and the arrow keys. When the user lets go, the handle stays where it is. Show it on one test page, alone. Done means: I can drag it on a computer and on a phone, and use the arrow keys.

Notice what is in the request:

- one component only;
- exact sizes;
- every way to use it (mouse, finger, keyboard);
- what "done" means.

## Step 2: Let the agent ask questions

Add this line to your request:

> Before you start, list anything you are not sure about.

A good agent might ask: "Should the number change in steps of 1 or 5?" or "What happens below 0 or above 100?" Answer each one. Every question you answer now is a bug you avoid later.

## Step 3: Build the first version

Let the agent build it. Ask it to show the component on its own test page, not inside your real website yet. This keeps problems small and easy to find.

## Step 4: Check it yourself

Do not trust "it works". Open the test page and try these checks:

- **Mouse:** drag the handle all the way left and right. Does it stop at 0 and 100?
- **Click:** click somewhere on the track. Does the handle jump there?
- **Let go:** release the handle in the middle. Does it stay there, or jump back?
- **Keyboard:** press Tab until the slider is selected. Can you see that it is selected? Do the arrow keys move it?
- **Phone:** open the page on your phone, or make the browser window narrow. Can you drag it with your finger? Does the page scroll by mistake while you drag?
- **Number:** does the number above the handle always match the position?

Write down what fails. Most first versions fail one or two of these. That is normal.

## Step 5: Ask for fixes, one at a time

Bad fix request:

> It's buggy, fix it.

Good fix request:

> When I release the handle on my phone, it jumps back to 0. It should stay where I let go. Fix only this. Do not change the design.

Why one at a time? If you send five problems at once, the agent may fix three, break one, and you will not know which change did what.

After each fix, repeat the check from step 4 for that problem.

## Step 6: Check again and call it done

When every check passes, do the full list from step 4 one last time. Changes can break things that worked before.

Now you can say it is done, because you can show proof:

- a screenshot on a computer;
- a screenshot on a phone;
- a short note: "Tested mouse, touch and keyboard. All pass."

Only now should you put the component into your real page.

## Common mistakes

- **The handle jumps back when you let go.** The agent saved the value only while dragging. Ask it to keep the value after release.
- **The page scrolls on a phone while dragging.** Ask the agent to stop the page from scrolling while the slider is being dragged.
- **No visible focus.** You pressed Tab and see nothing. Ask for a clear focus ring.
- **The number and the handle disagree.** Ask the agent to use one single value for both.
- **The design changed while fixing.** Remind the agent: "Fix only this. Do not change the design."

## Use this process for anything

Replace "slider" with "menu", "form" or "card". The steps stay the same:

1. Clear request with exact details.
2. Questions first.
3. Build it alone, on a test page.
4. Check it yourself with a list.
5. Fix one problem at a time.
6. Check everything again, then call it done.

## Next steps

- [Every State of a Button](https://horizonx.so/resources/every-state-of-a-button)
- [Low Score on the Checklist? Fix These First](https://horizonx.so/resources/low-score-on-the-checklist-fix-these-first)