A product landing page
Use the product’s actual subject and audience to choose a coherent visual direction, then organize copy and interaction around the visitor’s decision.
Frontend Design by Anthropic
Use Frontend Design by Anthropic to turn a specific product brief into an intentional interface. Explore visual direction, typography, color, layout, and interaction choices, then review the rendered result against the audience, existing identity, and practical needs of the page you are building.
Install and get started
Choose your agent to see how to get started. In Floatboat, copy a request that asks the agent to read the original instructions. Other options show the Skill installation command or the publisher’s native setup steps.
Choose an agent
Start in Floatboat
Copy the request into a Floatboat conversation
Read the original Frontend Design instructions at https://github.com/anthropics/skills/blob/main/skills/frontend-design/SKILL.md. Explain its purpose, required tools, and installation options, then help me use it.Let the agent read the original instructions and check how to use them in your environment.
Download Floatboat ↗Try this request
Design a landing page for this product using the supplied copy and existing brand colors. Propose the visual direction first, then implement it and check desktop and mobile layouts.
About Frontend Design
Frontend Design is Anthropic’s Skill for shaping new interfaces or reworking an existing visual direction. It asks an agent to ground design choices in the subject, audience, and purpose of a brief, then make a coherent plan before implementation. The guidance connects typography, color, spacing, motion, and content to that direction, with attention to responsive behavior and accessibility. It is useful for a landing page, dashboard, or product screen that needs an identifiable visual approach. Provide real content and any existing design constraints so the agent can develop the interface and critique its rendered result. The Skill supplies design instructions rather than a separate website builder.
Use Cases for Frontend Design
Explore interface work where the design needs to reflect a specific subject and audience. Build a product landing page, give a dashboard a clearer hierarchy, or replace an unsuitable visual direction while keeping real content, task requirements, and responsive behavior central to the result.
A dashboard needs clearer hierarchy
Prioritize the information and actions people use most, with typography and spacing that make the working screen easier to scan.
An existing page needs a redesign
Provide the current interface and the requirements it must preserve so the agent can replace the visual direction without losing product content.
How to Use Frontend Design
Start with the page’s audience, primary task, content, and any pinned visual requirements. Ask the agent to propose a concise design direction before building, then inspect the rendered interface and refine hierarchy, readability, interaction, and behavior at the sizes the page will support.
- 01
Define the brief
Provide the subject, audience, primary task, and real content. Include existing brand assets and requirements that must remain.
- 02
Plan and implement the direction
Review a compact plan for typography, color, layout, and interaction. Ask the agent to build the page within the project’s stack.
- 03
Review the rendered interface
Inspect representative desktop and mobile views. Refine hierarchy, content fit, keyboard access, and motion against the original brief.
Explore More Agent Skills
Read another Skill guide and check its original source before using it.
Frontend Design FAQ
Is this the same as Vercel’s Web Design Guidelines?
No. Frontend Design guides the visual direction and implementation of an interface. Vercel’s Skill reviews selected UI source files against a separate set of interface guidelines.
What input makes a design request useful?
Provide the product or subject, intended audience, main user task, real copy, and constraints. Add existing screens when the work must retain a visual identity or interaction.
Can it work with an existing design system?
Yes. State which tokens, components, layouts, and brand decisions are fixed. The source gives the user’s brief priority, so a request can explicitly preserve those choices.
Does installing the Skill create a running website?
No. Installation provides instructions to the host agent. Building a running page still requires the project files, an appropriate runtime, and the development work requested by the user.
Does it include accessibility and responsive checks?
The source includes responsive behavior, keyboard focus, reduced motion, and visual accessibility in its quality guidance. Verify them in the rendered interface; reading the Skill alone does not establish compliance.
Which Frontend Design implementation does this page describe?
This page describes the frontend-design folder in anthropics/skills. Skills with the same name from other publishers or repositories may contain different instructions and installation paths.