frontend-design guide: plan, build and inspect a distinctive interface

frontend-design is Anthropic's Agent Skill for creating a new interface or reshaping an existing one. It asks a coding agent to choose a visual direction, critique that direction against the actual brief, then implement and inspect the page. It is guidance, not a component library or a source of real product copy and assets.

Install: choose one route for your agent

Anthropic's Claude Code plugin. Enter these commands inside Claude Code, not in your system terminal:

/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skills

Anthropic's example-skills plugin includes frontend-design alongside other example skills. After installing it, explicitly ask Claude Code to use the frontend-design skill.

Install only this skill in the current project. From the project terminal, use the third-party skills CLI:

npx skills@latest add anthropics/skills --skill frontend-design --agent claude-code

For Codex, change the last option to --agent codex. This command retrieves the skill files from Anthropic's repository, but Vercel Labs maintains the installer; it is separate from Anthropic's Claude Code plugin. Pick either route. If the agent cannot find the skill, check the target agent and install location, then start a new chat.

First use: request a design plan before code

Have a runnable frontend project and provide the actual audience, page task, technology stack, brand rules, authorized assets, and behavior that must remain intact. This example is a pottery studio booking page; replace the path and details with your own. Leave unknown dates, prices, locations, and testimonials marked as unknown rather than inventing them.

Use frontend-design to revise the trial-class booking page at app/page.tsx. The audience is adults considering their first pottery class; the primary task is to understand the class and reach the existing booking flow. Keep the project's stack and booking behavior, and use the authorized work photos in public/studio. Mark any missing prices, times, or reviews as to be confirmed.

For the first pass, do not edit code. Show me:
1. The page's job, audience, and what the first screen should communicate;
2. A base palette of 4–6 named hex colors, plus typefaces and their roles for headings, body text, and supporting text;
3. A one-sentence layout concept, alignment rules, and two small ASCII wireframes comparing information order;
4. Three design principles specific to this studio.

Then critique the plan against the brief. Which colors, cards, labels, or animations are defaults that would fit almost any business? Revise those choices and explain what changed and why. Wait for my review before coding.

The expected first-pass output is the palette, type roles, wireframes, and reasons for revision—not page code. If the agent starts editing files, ask it to stop and finish the plan first. The useful question is why the work photos, class information, and booking action belong in that order. Cream, clay, or cards are not forbidden; use them when the brand and content justify them. If changing the studio name and photos to an unrelated business leaves the design intact, revise the information structure and visual focus before implementation.

Build and inspect the result

Once the direction is agreed, send a second request:

Implement the agreed plan while preserving the existing booking logic and project conventions. Check that real copy and assets are available; use clearly marked placeholders for missing details, not fabricated testimonials. Run the project's existing checks and open a preview. If screenshots are available, inspect desktop and narrow mobile views. Check the primary action's real destination, visible keyboard Tab focus, reduced-motion behavior, legibility, and helpful empty or error states. List anything this environment could not verify.

Walk the page as a first-time visitor: can you identify the class, find its duration, location and price, and understand what happens next? A button labelled “Book a trial class” should lead to booking; an error should tell you what to try next. If styles unexpectedly override one another, inspect CSS selector specificity, especially broad section rules colliding with button or spacing rules. Only claim a visual check when the page was actually viewed.

Common sticking points

• The agent does not use the skill: confirm that it was installed for this agent. The plugin and skills CLI are separate routes. Start a new chat and name frontend-design explicitly.
• The page still feels templated: return to the first-pass plan. Remove labels, decorative numbers, gradients, and repeated cards that carry no useful information. Do not ban a color or typeface mechanically.
• The layout looks good but the task fails: check mobile width, keyboard focus, reduced motion, the button outcome, and consistent interface language. Judge the result in a running browser and along the real user journey.