# Fronted Design

> 当需要设计或实现高质量前端页面/组件（Web UI、美化、落地页、控制台）时使用。

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

---


## 权威入口

- ` .cursor/skills/fronted-design/SKILL.md `
- 可配合：` .cursor/skills/visual-design-foundations/SKILL.md `
- 可配合：` .cursor/skills/interaction-design/SKILL.md `

## 适用场景

- 从需求到页面落地的 UI 实现任务。
- 需要提升现有界面的视觉层级与一致性。
- 需要在不改业务逻辑前提下优化体验。

## 非适用场景

- 不用于替代业务接口设计或数据库建模。
- 不用于无依据的大改风格（需与品牌/产品目标一致）。

## 执行步骤

1. 明确页面目标、核心用户任务与成功标准。
2. 设计结构层级：布局、信息密度、主要操作路径。
3. 定义视觉规则：颜色、字体、间距、状态反馈。
4. 补全交互细节：hover/focus/loading/empty/error。
5. 交付前检查响应式、可访问性与性能边界。

## 常见陷阱

- 只改样式不改信息层级，导致可用性仍差。
- 动效过多影响主任务与页面性能。
- 忽略空态与错误态，导致体验断层。