The usual AI frontend problem is a good-looking component that ignores the design system next to it and only handles the happy path. This agent's order of priorities is usable, accessible and consistent first, distinctive second, and it checks its work in a real browser rather than trusting the code.
When to use the Frontend Design agent
- A new page, dashboard or landing page
- A component library or a set of shared components
- A redesign that must stay consistent with the rest of the product
- Any UI where accessibility is a requirement, not a nice-to-have
What is in the agent file
| Name | frontend-design |
|---|---|
| Tools | Read, Write, Edit, Grep, Glob, Bash, plus Claude Code's browser preview tools. It can edit files and run commands, so review its diff. |
| Model | sonnet, up to 45 turns per task |
| Kit | Engineer kit, 109 lines |
How it works. Beyond its role statement, the file sets out 5 rules it follows: Reuse audit: before creating anything; Required states: a component is not done without them; Accessibility thresholds: WCAG 2.1 AA, not preferences; Responsive rules; Severity rubric.
What it reports. Every run ends in the same structure: Goal and primary action, Reuse audit, Direction, States implemented, Accessibility verification, Responsive verification, Findings.
Excerpt from the agent file
The settings and opening instructions, as they appear in .claude/agents/frontend-design.md:
---
name: frontend-design
description: Creates distinctive, accessible, production-ready interfaces — visual direction, complete state coverage, responsive implementation — reusing the existing design system rather than inventing alongside it. Invoke by name for new pages, dashboards, landing pages, component systems or redesigns.
model: sonnet
maxTurns: 45
tools: Read, Write, Edit, Grep, Glob, Bash, <browser preview tools>
---
You are a Frontend Design Agent. Your job is an interface that is usable, accessible and consistent with what already exists — in that order, before it is distinctive.
1. Clarify the user goal and the single primary action.
2. **Inspect the existing design system first.** Tokens, components, patterns. Building alongside a system rather than on it is the most expensive mistake available here.
3. Establish layout, hierarchy, typography, colour and interaction direction.
4. Design the complete state set before implementing.
5. Implement responsively, reusing existing components.
6. Verify accessibility and contrast against the thresholds below.
7. Validate in the browser at every supported viewport, then refine.The full file continues with the rules above and the exact report format. It is included in the Agentsforce kit.
Example requests
Name the agent to be sure Claude uses it, or describe the task and let its description trigger it:
- "Use frontend-design to build the billing settings page with our existing components."
- "Build the empty, loading and error states for the orders table."
- "Use frontend-design to make this landing page work at 375px and check contrast."
- "Redesign the signup form; reuse our tokens and verify it in the browser."
When to use a different agent
| If you need | Use instead |
|---|---|
| Reviewing a finished UI without changing it | Use ui-reviewer, which is read-only |
| Landing page copy and conversion structure | Use landing-page-designer |
| Building a token system from scratch | Use design-system |
Works well with
- Code Reviewer: checks what a change did, not whether a file looks fine
- TDD Engineer: writes a failing test, watches it fail for the expected reason, writes the smallest code that passes, then refactors, one small slice at a time
- API Engineer: designs and changes endpoints that clients depend on
Related playbooks in the kit, which Claude loads when the task calls for them: ui-state-coverage, accessibility-testing, responsive-layout, design-tokens.
How to get it
- Write your own: the free Subagent Generator drafts a starter frontend design file you can edit and save in
.claude/agents/. - Use the tested version: Agentsforce includes this agent with 54 other specialists and 89 playbooks for a one-time $49, installed with one command.
Frequently asked questions
Can a Claude Code subagent see the page it builds?
This one can when a browser tool is available. Its file lists Claude Code's browser tools so it can open a preview, resize the window and read console errors before reporting the work as done.
Does it work with Tailwind, CSS modules or plain CSS?
It uses what the project already has. Its first step is a reuse audit of your tokens, components and patterns, and it builds on those rather than adding a parallel system.
What accessibility standard does it check?
WCAG 2.1 AA, including contrast ratios, keyboard operation and focus handling, with thresholds written into its file rather than left to judgment.