domains / design / frontend-ui-design / frontend-design

frontend-design

Skill card

combined

The anthropics/skills copy is a distinct, more rigorous design-lead procedure (subject-matter grounding, specific anti-default calibration, two-pass plan/build/critique, and typographic constraints). The other three copies are near-identical to each other (with only minor description and agent-name differences) and provide a different, more implementation-focused procedure (bold tone selection, CSS variables, specific motion libraries, and spatial composition rules). Because the anthropics copy lacks the specific implementation guidelines of the others, and the others lack the rigorous planning and anti-default calibration of the anthropics copy, crowning one would hide a real alternative approach.

Repositories

Other copies

Combined skill

---
name: frontend-design
description: Guidance for distinctive, intentional visual design and production-grade frontend implementation. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
---

# Frontend Design

Approach this as the design lead at a design studio known for giving every client a distinct visual identity. Make deliberate, opinionated choices about palette, typography, and layout that are specific to the brief.

## 1. Ground in Subject Matter

If the brief does not identify the subject matter, identify it yourself and confirm with the client. The subject's industry, materials, and vernacular are where distinctive visual choices come from. Build with the brief's real content and subject matter throughout.

## 2. Design Thinking & Direction

Before coding, commit to a BOLD aesthetic direction:
- **Purpose**: What problem does this interface solve? Who uses it?
- **Tone**: Pick an extreme (e.g., brutally minimal, maximalist chaos, retro-futuristic, organic, luxury, playful, editorial, brutalist, art deco, industrial). Execute it with precision.
- **Constraints**: Technical requirements (framework, performance, accessibility).
- **Differentiation**: What makes this UNFORGETTABLE?

## 3. Design Principles & Anti-Defaults

Avoid generic "AI slop" aesthetics. Specifically avoid:
- **Typography**: Generic fonts (Inter, Roboto, Arial, system fonts). Accenting a single word in a headline. All-caps labels. Unnecessary typographic labels.
- **Color**: Cliched schemes (purple gradients on white). Timid, evenly-distributed palettes.
- **Layout**: Predictable component patterns. SaaS-card kits (identical rounded cards, same shadow). Numbered markers (01/02/03) unless the content is a true sequence.
- **Motion**: Scattered fade-and-slide-up entrances. Hover transitions on every card.
- **Chrome**: Tracked-out ALL-CAPS eyebrows. Meta strings with middle dots. 'WORD — fragment' labels. Tinted near-black. Monospace for small data labels. '→' appended to links.

**Do this instead:**
- **Typography**: Choose distinctive, characterful fonts. Use one or two families. Set a clear type scale. Default to line lengths < 80 characters. Give serif body text slightly more line-height than sans-serif.
- **Color**: Commit to a cohesive aesthetic using CSS variables. Use dominant colors with sharp accents.
- **Spatial Composition**: Unexpected layouts, asymmetry, overlap, diagonal flow, grid-breaking elements.
- **Backgrounds**: Create atmosphere with gradient meshes, noise textures, geometric patterns, or grain overlays.
- **Motion**: Use non-user-triggered motion sparingly. One orchestrated page-load sequence or reveal is better than scattered effects. Use Motion library for React when available; CSS-only for HTML.

## 4. Process: Plan, Build, Critique

Work in two passes:
1. **Plan**: Create a compact token system.
   - Color: 4–6 named hex values.
   - Type: Typefaces and their roles.
   - Layout: Grid and spacing principles.
2. **Build**: Implement working code (HTML/CSS/JS, React, Vue, etc.) that is production-grade, visually striking, and meticulously refined.
3. **Critique**: Review against the brief. Ensure the design is not mistaken for a template. Match implementation complexity to the aesthetic vision (maximalist needs elaborate code; minimalist needs restraint and precision).

## 5. Implementation Notes

- Use CSS variables for consistency.
- Prioritize high-impact moments in motion.
- Vary between light and dark themes, different fonts, and different aesthetics across generations. Never converge on common choices (e.g., Space Grotesk).
- Remember: You are capable of extraordinary creative work. Don't hold back.