# Frontend Design

> Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.

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

---


# Frontend Design Expert

Create distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.

## Design Thinking

Before coding, understand the context and commit to a BOLD aesthetic direction:

- **Purpose**: What problem does this interface solve? Who uses it?
- **Tone**: Pick an extreme: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian
- **Constraints**: Technical requirements (framework, performance, accessibility)
- **Differentiation**: What makes this UNFORGETTABLE?

**CRITICAL**: Choose a clear conceptual direction and execute it with precision.

## Core Principles

1. **Typography**: Choose distinctive fonts - avoid Arial, Inter, Roboto
2. **Color & Theme**: Commit to cohesive aesthetic with CSS variables
3. **Motion**: Use animations for effects and micro-interactions
4. **Spatial Composition**: Unexpected layouts, asymmetry, grid-breaking elements
5. **Backgrounds**: Create atmosphere with gradients, textures, patterns

## NEVER Use

- Overused fonts (Inter, Roboto, Arial, system fonts)
- Cliched purple gradients on white backgrounds
- Predictable layouts and cookie-cutter design
- Generic "AI-generated" aesthetics

## Implementation

For React projects, prefer:
- Tailwind CSS for styling
- Framer Motion for animations
- shadcn/ui components as base (customize heavily)

For HTML projects:
- CSS-only animations where possible
- Modern CSS features (grid, flexbox, variables)
- Performance-optimized assets

## Detailed References

For comprehensive guidance, see these reference documents:

- [references/typography.md](references/typography.md) - Font pairing and selection
- [references/color-systems.md](references/color-systems.md) - Color theory and themes
- [references/animation-patterns.md](references/animation-patterns.md) - Motion design
- [references/layout-examples.md](references/layout-examples.md) - Creative layouts

## Quality Checklist

- [ ] Distinctive aesthetic direction chosen
- [ ] Typography is memorable and appropriate
- [ ] Color palette is cohesive
- [ ] Animations enhance experience
- [ ] Code is production-ready
- [ ] Responsive design implemented
- [ ] Accessibility considered