| name | frontend-design |
| description | Design and build high-quality, production-ready frontend interfaces that avoid the generic "AI-generated" look. Use when creating or reviewing web UI, landing pages, dashboards, components, or any frontend design work. Covers design principles, typography, color, spacing, layout, and visual polish to make interfaces feel intentional and human-crafted. |
| license | MIT |
| metadata | {"author":"anthropics","version":"1.0.0"} |
Frontend Design
Guidance for designing and building frontend interfaces that look intentional, polished, and human-crafted — not generic or "AI-generated."
When to Use This Skill
Apply when:
- Creating new web pages, landing pages, dashboards, or UI components
- Reviewing or refining existing frontend design
- Building interfaces that need to feel premium and distinctive
- Making design decisions about layout, typography, color, spacing, or visual style
Core Design Principles
1. Avoid the Generic AI Look
The most common failure mode of AI-generated interfaces is a bland, uniform, "template" appearance. Avoid:
- Overly symmetrical, centered layouts with everything in a single column
- Uniform card grids with identical spacing everywhere
- Generic purple/blue gradient hero sections
- Excessive rounded corners and soft shadows on everything
- Stock-photo-style imagery with no art direction
2. Establish Visual Hierarchy
- Use size, weight, and color to create clear hierarchy
- One primary action per screen; make it visually dominant
- Use whitespace deliberately to group related content
- Contrast is your friend — make important elements stand out
3. Typography
- Choose a distinctive typeface pairing (a display face + a body face)
- Limit to 2–3 font families maximum
- Establish a clear type scale (h1–h6, body, caption)
- Set comfortable line-height (1.5–1.7 for body text) and letter-spacing
- Use font weight and size, not just color, to differentiate
4. Color
- Build a cohesive palette: neutrals + 1–2 accent colors
- Use color sparingly and with purpose (accent for actions, emphasis)
- Ensure sufficient contrast for accessibility (WCAG AA)
- Avoid pure black/white; use off-whites and deep grays for warmth
5. Spacing & Layout
- Establish a consistent spacing scale (4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px)
- Use a grid system for alignment and rhythm
- Break the grid occasionally for visual interest
- Balance negative space — don't fill every pixel
6. Visual Polish
- Add subtle details: borders, dividers, micro-interactions, hover states
- Use shadows sparingly and with intention
- Consider texture, patterns, or custom illustrations for personality
- Ensure responsive behavior at all breakpoints
Design Process
- Understand the goal — what is the user trying to accomplish?
- Establish the visual direction — mood, palette, typography, style
- Build the layout — structure, hierarchy, spacing
- Add polish — details, interactions, responsive refinement
- Review — check hierarchy, contrast, consistency, and the "AI look"
Related Skills
- canvas-design — for canvas-based graphics
- web-artifacts-builder — for building web artifacts
- theme-factory — for creating design themes
- ui-ux-pro-max — for advanced UI/UX design intelligence
Resources
