SEVEN-LAYER FRONTEND AGENT
Seven layers turn a prompt into a React component that feels intentionally designed.
DESIGN
- UX / UI
- Color systems
- Accessibility
- UX writing
- Design engineering
- Multiple states
- Choice design
- Decision flows
BUILDING
- React
- Motion
- Base UI
- Tailwind CSS
- Responsive
- Typed
- E2E tested
Frontend Agent routes, builds, checks, reviews, and refines each request. Verified component knowledge and project conventions keep every result grounded from brief to delivery.
Run the full cycle from your editor
One command installs the agent into a project. There is nothing to sign in to.
npx frontendag init --token=<token>Access is invite-only for now. Leave an address and a token follows.
What the command does (build, think, structure, ask, review, iterate).
ONE REQUEST, END TO END
BRIEF
a stock quote card with
a sparkline, market session
and price movement that
does not rely on colour
SEVEN LAYERS
request understood · intent preservedReads the brief, identifies its constraints, and preserves the intended visual direction.
verified context · project awareBrings together the relevant component guidance, design standards, and project conventions needed for the request.
typed React · one focused componentBuilds a focused React component with typed props, using the project's existing styling and component conventions.
project checks · verified APIsChecks that the component fits the project, uses supported APIs, and compiles cleanly before it moves forward.
real browser · visual proofPreviews the compiled component in a real browser so its layout and presentation can be assessed.
visual review · practical feedbackReviews the rendered component for visible issues in layout, hierarchy, readability, and polish without compromising accessibility.
rechecked improvements · valid resultApplies the most useful fixes, checks the result again, and returns a version that passes.
COMPONENT / STOCK-CARD.TSX
VIEW →THE EXECUTION CYCLE
- 01
Route
brief + constraints
- 02
Assemble
relevant guidance
- 03
Generate
typed React
- 04
Validate
project checks
- 05
Render
browser preview
- 06
Critique
visual review
- 07
Repair
rechecked fixes
Route and assemble
The agent understands the brief, preserves its creative direction, and gathers the relevant verified guidance and project conventions.
Generate and validate
It builds one typed React component, then checks it against the project and supported component APIs.
Render, critique and repair
Eligible work is previewed in a real browser, reviewed for visible issues, and improved before final validation.
Each stage keeps the result grounded in the brief, compatible with the project, and ready for review.
WHAT STANDS BEHIND ONE REQUEST
Verified
component guidance grounded in supported APIs
Project-aware
code checked against your types and conventions
Accessible
interaction requirements kept in scope throughout
Reviewed
compiled output checked again after improvements
Focused by design. Each request draws on the component guidance and design standards it needs, keeping the result relevant to the brief.
Checked before delivery. Generated code is validated against the project and supported component APIs, then reviewed again after improvements.
OUTPUT / RENDERED PREVIEWS
- Notification inboxone brief, four modelsOpus 5Sonnet 4Haiku 4.5Gemini 3.7 Flash
- Profile card with quotaone brief, four modelsSonnet 4Haiku 4.5Grok 4.6Composer 2.5
- Transaction processone brief, two modelsOpus 5Composer 2.5
- Activity timelineone brief, two approachesOpus 5Haiku 4.5Kimi K2p7
- Pricing cardone brief, two versionsPricing cardHaiku 4.5
- Request cardone brief, one modelHaiku 4.5
- Single componentsone request eachShare accessStock cardTicket cardChoice card
Start with a brief. End with validated code.
One execution path from intent to a React file ready for your project.