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.