# Frontend Design

> Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.

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

---


# Frontend Design

## Overview

Craft visually striking frontend interfaces by committing to bold, intentional aesthetic directions rather than defaulting to common patterns.

## Design Strategy

Before coding, analyze:
- Purpose and intended audience
- Tone and emotional impact
- Technical constraints
- What will make the interface memorable through a specific conceptual lens

## Aesthetic Focus Areas

### Typography
Choose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter.

### Color & Theme
Establish cohesive palettes using CSS variables with:
- Dominant colors
- Sharp accents
- Considered contrast ratios

### Motion
Prioritize high-impact animations:
- Page-load sequences
- Scroll-triggered effects
- Micro-interactions

### Spatial Composition
- Asymmetry
- Overlap
- Diagonal flow
- Grid-breaking elements

### Visual Details
Create atmosphere through:
- Gradients
- Textures
- Patterns
- Contextual effects

## Critical Avoidance

Do NOT create "generic AI-generated aesthetics":
- Overused typefaces
- Predictable layouts
- Cookie-cutter design lacking context-specific character
- Excessive centered layouts
- Default purple gradients
- Uniform rounded corners

## Implementation Approach

Match code complexity to the vision:
- Maximalist designs require elaborate animations
- Minimalist designs demand restraint and precision in spacing and typography

## Output

Production-ready code using:
- React components
- Tailwind CSS
- Modern CSS features
- Accessibility best practices