# Frontend Design

> 用于设计和实现新的 Web / 前端界面：当用户要新页面、新组件、改版、重设计，且核心目标是视觉方向、布局、交互手感和整体 UI 气质时使用。Combine with `fixing-accessibility` / `fixing-motion-performance` when 需要专项验收；Prefer `react-best-practices` when the main goal is 现有 React/Next 的性能、缓存、bundle 或代码健康优化；Do not use for 纯平台规范或只做工程性能收口的问题。

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

---


# frontend-design

## Intent
- 用于设计和实现新的 Web / 前端界面：当用户要新页面、新组件、改版、重设计，且核心目标是视觉方向、布局、交互手感和整体 UI 气质时使用。Combine with `fixing-accessibility` / `fixing-motion-performance` when 需要专项验收；Prefer `react-best-practices` when the main goal is 现有 React/Next 的性能、缓存、bundle 或代码健康优化；Do not use for 纯平台规范或只做工程性能收口的问题。

## Default operating pattern
1. Clarify audience, surface, success metric, and implementation boundary.
2. Study relevant patterns, references, or constraints before proposing a direction.
3. Define structure, interaction, copy, and visual hierarchy with a reusable rationale.
4. Pressure-test accessibility, motion, maintainability, and platform fit.
5. Return a concise recommendation and the next implementation move.

## Pack fit
- Included in: `product-design`
- Keep examples generic, privacy-safe, and portable across hosts.

## Boundary
- Do not reduce a visual redesign request to backend refactoring advice.