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.
Describe the product, audience, and constraints behind the interface you want. Shape a design request that proposes a coherent direction and checks desktop and mobile results, with existing content and required behavior treated as part of the brief.
Describe the audience, primary action, supplied copy, and existing visual identity.
Copy the request into a new Floatboat conversation and provide the required material.
Download FloatboatPreview and copy the request. It is not sent automatically from this page.
Reference: Frontend Design https://github.com/anthropics/skills/blob/main/skills/frontend-design/SKILL.md Read the original documentation and check the current environment and dependencies. Propose any new installation or tool connection before proceeding. My task: 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. Expected deliverable: A visual direction followed by an implementation and desktop/mobile review, subject to the available tools.
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.
Landing pages, dashboards, and redesigns each ask visitors to make different decisions. Explore how Frontend Design connects product context, information hierarchy, and existing constraints with a coherent interface that can be checked on real screens.
A product landing page needs a visual direction grounded in its positioning, audience, and the visitor's decision. Use approved copy and brand assets to organize the page and its interactions around that purpose. Check the implementation on desktop and mobile rather than judging the design from one attractive screen.
A dashboard redesign should begin with its key metrics and most frequent actions. Examine screenshots and actual working tasks to decide what deserves priority, then adjust typography, spacing, and layout accordingly. Important controls should become easier to find without disrupting the interactions people already depend on.
An existing page can take on a new visual direction while retaining its product content and functional constraints. Supply the current interface, known usability problems, and content that must survive the redesign. Compare representative before-and-after states to verify that the replacement solves the problem without losing required behavior.
A new section or page may need to fit an interface that already has approved components and visual rules. Supply those references and the new user task, then compare what can be reused with what genuinely needs a new pattern. Check the implementation alongside neighboring screens so the addition belongs to the product without weakening its content or interaction requirements.
Interface design needs the actual product context and constraints before a visual direction is chosen. Use the source workflow to implement a coherent page, then inspect representative desktop and mobile states while retaining the required content and interactions.
Provide the subject, audience, primary task, and real content. Include existing brand assets and requirements that must remain.
Review a compact plan for typography, color, layout, and interaction. Ask the agent to build the page within the project’s stack.
Inspect representative desktop and mobile views. Refine hierarchy, content fit, keyboard access, and motion against the original brief.
Read another Skill guide and check its original source before using it.
