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
Frontend Skills for Interface Design and React Project Checks
Compare interface-design instructions with tools for inspecting a running page. React implementation still needs repository-specific component, styling, and test context.
Separate Interface Decisions from Runtime Evidence
Choose Frontend Design or Design Taste Frontend when the task starts with a visual brief. OpenDesign produces HTML prototypes, while Impeccable supports interface refinement. Browser Testing with DevTools adds runtime evidence from an existing page. For a React application, provide the installed version and component conventions before adapting the output. The current collection contains interface resources rather than a dedicated React API or performance guide.
Frontend Interfaces Skills
Browser Testing with DevTools
Collect DOM, console, request, and screenshot evidence from an isolated browser session.
Addy Osmani
- Development Workflows
- Deployment, Browser & Desktop
- Frontend Interfaces
- Testing & Debugging
- Browser Automation
- Browser Automation
- Testing
- Debugging
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
Frontend 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 screen
Supply content, visual constraints, and the existing component system before choosing a design instruction.
Checking interaction
Use a running application to inspect navigation, controls, responsive states, and console evidence.
Move from prototype to React
Use OpenDesign for an HTML prototype, then inspect the application’s components and state before adapting it to React.
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 resource should I use for a new interface?
Compare Frontend Design and Design Taste Frontend for design instructions. Use OpenDesign when an HTML prototype is the intended deliverable; check each guide’s host and setup before starting.
How do I investigate an existing page failure?
Browser Testing with DevTools uses Chrome DevTools MCP to collect console and network evidence. Bring a reachable page and a reproducible failure instead of asking a visual-design instruction to diagnose runtime behavior.
What should a design brief include?
Include real copy, target screens, brand constraints, and reusable components. A screenshot alone may leave behavior unspecified.
Can browser checks prove component correctness?
They reveal observable behavior in the exercised states. Add component or integration tests for state transitions and edge cases.
How should mobile layouts be reviewed?
Exercise narrow viewports, long text, keyboard focus, and open menus. Check the actual rendered page rather than only a desktop screenshot.
Does a listed Skill install a UI library?
Not by category membership. Follow the source setup instructions and approve dependency changes separately.
Review the Interface in Context
Bring the component, real copy, and screenshots to define the interface change and the browser states to inspect.