# Frontend Design

> Use when the user wants a distinctive, production-ready frontend interface with clear visual direction, strong hierarchy, and polished interaction details.

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

---


# Frontend Design

Use this skill for UI work where visual quality matters as much as functionality.

## Focus

- Pick one clear visual thesis before writing code
- Keep hierarchy obvious in the first viewport
- Make spacing, type scale, and color choices feel intentional
- Prefer cohesive composition over adding more component chrome

## Working approach

1. Identify the target mood and product context.
2. Choose a narrow palette and a consistent typography story.
3. Build the layout around one memorable focal point.
4. Add motion only if it improves comprehension or presence.
5. Validate the result for readability, balance, and polish.

## Output expectations

- Produce working frontend code, not just a concept
- Keep the result cohesive across desktop and mobile
- Avoid generic, template-like defaults
- Explain the design thesis briefly when presenting the result