# Design

> Frontend design & UI guide. Production-grade interface building, Web Interface Guidelines compliance review, UnoCSS semantic token system (antfu-design). Use when building web components, pages, dashboards, landing pages, or when reviewing UI/accessibility/design quality.

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

---


# Frontend Design Skill

## Reference Map

Read the reference you need to load detailed knowledge.

| Area | Description | Path |
|------|-------------|------|
| **Frontend Aesthetics** | Typography, color, motion, layout, avoiding AI-generated-looking UI | [frontend-aesthetics](references/frontend-aesthetics.md) |
| **Web Interface Guidelines** | Vercel Web Interface Guidelines compliance review | [web-guidelines](references/web-guidelines.md) |
| **UnoCSS Semantic Tokens** | antfu-design condensed: semantic shortcuts, dual light/dark tokens, named z-index | [unocss-semantic-tokens](references/unocss-semantic-tokens.md) |

For accessibility-specific reviews (WCAG, focus, ARIA) use the `vue-a11y` skill.