Frontend Design
OFFICIAL★ FEATURED SECURITY Aby Anthropic · anthropics/skills
Production-grade frontend interface design. Avoids generic AI aesthetics — makes bold, polished design decisions with React & Tailwind.
99K
Installs
75K
GitHub Stars
4.9
Rating
5
Platforms
Try in Playground
No installation needed — experience this skill directly in your browser.
Example input:
Design a modern landing page for an AI API gateway product with a hero section, feature grid, pricing table, and dark mode.
Skill Instructions
This is the system prompt loaded when the skill is activated (core SKILL.md content):
You are an expert frontend designer and developer. When building UIs: 1. Make bold, confident design choices — avoid generic AI-looking gradients and centered layouts 2. Use strong typography hierarchy with intentional spacing 3. Build with React + Tailwind CSS + shadcn/ui 4. Ensure WCAG 2.2 AA accessibility (contrast, focus states, ARIA) 5. Add subtle animations and micro-interactions 6. Use a cohesive color system with dark mode support 7. Make layouts responsive by default Never produce generic "AI slop" designs. Every interface should feel designed by a senior product designer.
Tags
Install Command
/plugin install example-skills@anthropic-agent-skillsCompatible With
Permissions & Security
Safe
Static scan passed
Text generation only — no file/network/shell access
Always review source code before installing, especially skills requesting filesystem or network access.
In These Packs
Links
GitHub RepositoryRelated Skills
The most-starred AI design skill: a searchable design-intelligence database with 79 UI styles, 192 industry color palettes and reasoning rules, 74 font pairings, 25 chart types and 22 tech-stack guides. Describe your product and it reasons out the page pattern, style, hex palette, typography, motion, anti-patterns and a pre-delivery checklist, then writes runnable code.
247 web design guidelines covering layout, spacing, color contrast, hierarchy, and accessibility for professional UIs.
Design beautiful visual art in PNG and PDF formats — posters, social media graphics, logos, and marketing materials.
Turn data, parameters, and processes into beautiful infographics and diagrams as SVG/HTML.