Frontend Design
Create or reshape frontend interfaces with deliberate visual choices tied to the product brief.
Anthropic
- Design & Interfaces
- Frontend Interfaces
- Interface Design
- Component Design
Interface Design Skills, Components, and Visual Resources
Explore interface direction, accessible interactions, React components, animation guidance, and visual assets for building and reviewing real pages.
Turn a Visual Direction into a Working Interface
A design brief, a component library, and an interface review answer different questions. Skills can guide hierarchy, typography, interaction, and accessibility; projects may provide components, shader assets, or a design workspace. Start from the page and its states, then check whether the chosen resource supports the framework and behavior you actually need.
Design & Interfaces Skills
Design Taste Frontend
Take a landing page from audience and product brief through visual decisions, implementation and a real-browser review. Use the existing stack and preserve the content the page needs to communicate.
Leon Lin
- Design & Interfaces
- Frontend Interfaces
- Interface Design
- Browser Automation
Review Animations
Review a specific interaction before merging it. Inspect the code and observed behavior, then report which changes would improve timing, interruption or accessibility.
Emil Kowalski
- Design & Interfaces
- Animation
- Accessibility
- Code Review
Apple Design
Translate a drag, swipe or sheet interaction into a responsive web implementation. Verify what happens mid-gesture, on release and when reduced motion is enabled.
Emil Kowalski
- Design & Interfaces
- Interface Design
- Animation
- Accessibility
Design & Interfaces Projects
Impeccable
Install design guidance across supported coding agents and run the supporting engine for project context, interface checks, and browser-based design iteration.
Paul Bakaus
- Design & Interfaces
- Frontend Interfaces
- Interface Design
- Accessibility
- Browser Automation
OpenDesign
Create and review prototypes, decks, and motion with an agent and a reusable design system.
OpenDesign
- Design & Interfaces
- Documents & Office
- Frontend Interfaces
- Interface Design
- Component Design
- Presentations
- Animation
- MCP
Skills supply instructions; projects supply software or supporting resources. Check each source for setup, runtime, access, and license requirements.
Choose by the Job
Starting a New Interface
Frontend Design and Design Engineering address visual direction and implementation quality from the outset.
Reviewing an Existing Page
Web Design Guidelines provides a review workflow for concrete UI issues rather than a generic style preference.
Checking Motion and Feedback
Use motion-specific guidance when transitions, timing, or reduced-motion behavior needs attention.
Explore Related Task Categories
Find instructions and software for the next stage of your work, from code changes and interface design to office tasks and media production.
Frequently Asked Questions
Which instructions fit a new interface versus a review?
A new interface needs a visual direction, content hierarchy, and interaction decisions. An existing interface review starts from observed usability or implementation problems. Select design creation guidance for the former and review-oriented guidance for the latter.
Can a design Skill substitute for viewing the actual page?
No. Screenshots and a running interface expose spacing, overflow, contrast, and state changes that a code excerpt cannot establish. Inspect the page at relevant sizes and interact with the controls before declaring the design complete.
What should an accessibility review include beyond color contrast?
Check heading structure, meaningful labels, keyboard navigation, focus visibility, and whether interactions communicate their state. A visually polished screen may still be difficult to operate without a mouse or with assistive technology.
How do I decide whether an animation belongs in the interface?
Ask what change it explains or what feedback it supplies. Test the timing in context and respect reduced-motion preferences. Motion that slows a routine action or distracts from reading should be simplified or removed.
Should I create a new component for every page section?
Reuse an existing component when the structure and purpose match. Extract a shared component when several pages need the same pattern, but keep page-specific content configurable instead of forcing unlike sections into one rigid template.
How can cards stay consistent without repeating generic copy?
Give cards comparable information roles and sentence lengths: what the item does and who or what it helps. Consistent typography and spacing should support that editing; truncation alone cannot turn vague or uneven descriptions into useful content.
Should I choose a design Skill, component, or visual asset?
Use a Skill to guide decisions or review an interface. Choose a component when its behavior fits the framework and user interaction. Choose a visual asset for a specific presentation need, then check licensing, rendering cost, and whether it interferes with reading or controls.
Keep Interface Feedback in Context
Bring the page, design references, and review notes together before the next revision.