# 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.

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

---


# Frontend Design

Create memorable, distinctive interfaces. Avoid generic "AI slop" - every design should have a clear point of view.

## Design Philosophy

1. **Bold choices**: Pick a strong color palette, unusual typography, or distinctive layout
2. **Purposeful whitespace**: Let content breathe, don't fill every pixel
3. **Visual hierarchy**: Make the important things impossible to miss
4. **Micro-interactions**: Add subtle animations that delight

## Technical Stack

- React 18+ with TypeScript
- Tailwind CSS for styling
- Framer Motion for animations
- Use CSS Grid for complex layouts, Flexbox for simpler ones

## Anti-patterns

- Generic blue/white SaaS layouts
- Overuse of rounded corners and soft shadows
- Cards inside cards inside cards
- Gratuitous gradient backgrounds