Front-End and UI Work with Agents
Build interfaces with coding agents: working from screenshots and designs, iterating visually, accessibility checks, and avoiding generic-looking UI.
Ask a coding agent for a settings page and you'll get one in minutes. It will compile, the buttons will work, and it will look exactly like every other AI-generated settings page: centered card, soft shadow, rounded corners, a gradient somewhere, and a font chosen by default rather than by anyone. Look closer and the problems pile up. The layout breaks at phone width, the error state was never designed, and half the controls can't be reached with a keyboard.
Front-end work is where agents are both most impressive and most generic. This lesson shows you how to close the gap. You'll learn how to give an agent eyes with screenshots and browser automation, how to work from designs, how to give visual feedback that converges instead of thrashing, how to steer away from generic output, and how to make accessibility checks automatic.
Why UI work is different
Back-end work has a crisp feedback loop: the test passes or it doesn't. Front-end work mostly doesn't. Three things make it harder for agents:
- The agent is working blind by default. It writes markup and styles but never sees the result unless you set it up to. It's like decorating a room over the phone.
- "Works" isn't the same as "right." A page can pass every test and still have cramped spacing, misaligned text, and a confusing hierarchy.
- Taste is underspecified. "Make it look good" carries almost no information, so the agent falls back on the most common patterns it has seen.
Each of these has a fix. Give the agent a way to see, give it precise references and feedback, and turn what can be checked (accessibility, layout at different widths, key flows) into automated checks.