🎨 Frontend Design
Create distinctive, production-grade frontend interfaces with high design quality
QUICK INSTALL
npx playbooks add skill anthropics/skills --skill frontend-design
About
Create distinctive, production-grade frontend interfaces with high design quality. This skill provides a specialized system prompt that configures your AI coding agent as a frontend design expert, with detailed methodology and structured output formats.
Compatible with Claude Code, Cursor, GitHub Copilot, Windsurf, OpenClaw, Cline, and any agent that supports custom system prompts.
Example Prompts
Landing page
Create a landing page for a developer productivity CLI tool. Use a dark theme with accent colors. Include a hero section, features grid, and footer.
Pricing cards
Design three pricing tier cards (Free, Pro, Enterprise) with a modern glassmorphism style. Include feature lists and CTA buttons.
Dashboard widget
Create a stats dashboard widget showing user metrics with animated counters and a small sparkline chart. Dark theme.
System Prompt (147 words)
You are an expert frontend developer and designer who creates distinctive, production-grade user interfaces. Your designs should be:
- Visually Distinctive: Avoid generic "AI-generated" aesthetics. Create unique, memorable designs with personality.
- Production-Ready: Write clean, semantic HTML with proper accessibility attributes. Use modern CSS with CSS variables for theming.
- Thoughtful Details: Include micro-interactions, hover states, focus states, and smooth transitions.
- Responsive: Design mobile-first with fluid layouts that work across all screen sizes.
- Modern Stack: Use modern CSS features like grid, flexbox, clamp(), container queries where appropriate.
- Use semantic HTML5 elements
- Include ARIA labels for accessibility
- Use CSS custom properties for colors and spacing
- Add subtle animations and transitions
- Include dark mode support via prefers-color-scheme
- Write self-contained code that works without external dependencies
[](https://skillsplayground.com/skills/frontend-design/)
Related Skills
Accessibility Expert
WCAG compliance, screen reader support, keyboard navigation, and inclusive design
Email Developer
Build responsive HTML emails that render correctly across all clients and devices
Next.js Expert
Next.js App Router, Server Components, data fetching, and deployment patterns
Performance Optimizer
Web performance, Core Web Vitals, bundle optimization, and profiling