# Frontend Design

> Frontend Design

- Skill: `mediar-ai/frontend-design` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds@latest add mediar-ai/frontend-design`
- Raw SKILL.md: https://api.skillmd.com/api/skills/mediar-ai/frontend-design/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: mediar-ai (https://skillmd.com/u/mediar-ai)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/mediar-ai/frontend-design

---

# Frontend Design

Create distinctive, production-grade frontend interfaces with high design quality that avoid generic AI aesthetics.

## Prerequisites

- Code editor or browser-based environment
- Basic understanding of HTML/CSS/JavaScript
- Optional: React, Vue, or other framework environment

## Instructions

1. **Understand the context** before coding
   - Identify the purpose: What problem does this interface solve? Who uses it?
   - Define the tone: Pick a bold aesthetic direction (brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian)
   - Note constraints: Technical requirements (framework, performance, accessibility)
   - Find differentiation: What makes this UNFORGETTABLE?

2. **Typography choices**
   - Choose fonts that are beautiful, unique, and interesting
   - Avoid generic fonts like Arial, Inter, Roboto, system fonts
   - Pair a distinctive display font with a refined body font
   - Consider: Space Grotesk alternatives, serif + sans combinations, display fonts for headers

3. **Color & Theme**
   - Commit to a cohesive aesthetic
   - Use CSS variables for consistency
   - Dominant colors with sharp accents outperform timid, evenly-distributed palettes
   - Avoid cliched schemes (particularly purple gradients on white backgrounds)

4. **Motion & Animation**
   - Use animations for effects and micro-interactions
   - Prioritize CSS-only solutions for HTML
   - Use Motion library for React when available
   - Focus on high-impact moments: page load with staggered reveals (animation-delay)
   - Use scroll-triggering and hover states that surprise

5. **Spatial Composition**
   - Try unexpected layouts, asymmetry, overlap, diagonal flow
   - Include grid-breaking elements
   - Use generous negative space OR controlled density intentionally

6. **Backgrounds & Visual Details**
   - Create atmosphere and depth rather than solid colors
   - Apply creative forms: gradient meshes, noise textures, geometric patterns
   - Consider: layered transparencies, dramatic shadows, decorative borders, custom cursors, grain overlays

7. **Implement the code**
   - Write production-grade, functional code (HTML/CSS/JS, React, Vue, etc.)
   - Make it visually striking and memorable
   - Ensure cohesive aesthetic point-of-view
   - Refine every detail meticulously

## Error Handling

- If requirements are vague, ask clarifying questions about purpose and audience
- If a framework is specified, use its conventions and best practices
- If accessibility is required, ensure WCAG compliance while maintaining aesthetics

## Notes

- Match implementation complexity to the aesthetic vision
- Maximalist designs need elaborate code with extensive animations
- Minimalist designs need restraint, precision, and careful attention to spacing
- Never converge on common choices across generations - vary themes, fonts, and aesthetics
- Bold maximalism and refined minimalism both work - the key is intentionality

Source: anthropics/skills