Frontend Designer

Frontend Designer is AR Labs' tooling for turning a visual design into something code can use, built for developers who want to reuse a site's look in a new project. Its working pipeline takes the address of a website, studies the page in a real browser, rebuilds it as a single high-fidelity prototype page, and then extracts that page's design language (colours, type, spacing, shadows and component patterns) into design tokens a new project can use. It is built from Claude Code agents, the specialised sub-agents that Claude Code, Anthropic's coding agent (an AI agent that writes code), can hand work to, and it uses Playwright for browser automation.

How it works

The pipeline runs in three agent steps with a person in the middle.

flowchart LR
  U["Website address"] --> A["Analyser in a real browser"]
  A --> M["Microcosm: one-page prototype"]
  M --> H["Person refines it"]
  H --> X["Token extractor"]
  X --> O["Style guide and tokens"]

1. Analyse. An analyser agent drives a browser through Playwright and records screenshots, markup, computed styles and accessibility details.
2. Build a microcosm. A second agent writes a microcosm: a single self-contained page that reproduces the site's look as closely as it can, with the real assets. A person then iterates on the microcosm until it is right.
3. Extract tokens. A third agent reads the refined microcosm, not the raw analysis, and writes the design system out in four forms: a human-readable style guide with the design principles, a Tailwind CSS configuration, structured tokens as JSON, and CSS custom properties.

The microcosm is the key step. Extracting tokens straight from screenshots and scraped styles loses detail; extracting them from a page that a person has already checked against the original keeps it. The step also leaves behind a reusable reference page.

What exists today

The analysis-to-tokens pipeline is built and has been run end to end on two public product websites at high fidelity, producing reference prototypes and style guides that we reuse as starting points for new designs.

A second workflow was planned: start from a locked design and produce a finished React, Vite, shadcn/ui, Tailwind and TypeScript codebase. Agents for writing component specifications, generating components and assembling a project were defined, but that workflow has never run end to end, and it is not built. The project has been paused since April 2026.

Decisions

In April 2026 we reframed the project. The original plan included an agent that would decide on an aesthetic from a written prompt and pass a brief down the line. Experience on our own pages showed that taste is found more reliably by reacting than by deriving it: a person looks at a few rendered directions, picks, and refines. That job moved to a separate interactive design probe skill, which produces a reference page in the same single-file format as a microcosm. Frontend Designer became the resolution layer: it takes a locked design, from either source, and turns it into code.

Two rules govern any code the project generates:

• Static Tailwind classes only. Generated components must never build class names at runtime, such as bg-${color}-500, because Tailwind cannot see them when it builds the stylesheet and the styles silently disappear.
• Distinctive over generic. Generated designs avoid the defaults that make AI-made pages look alike, such as the same few fonts, purple gradients and predictable layouts, in favour of a deliberate aesthetic direction.