Fronted Design

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

sunflowermm 51241a5 1.2 KB Updated

File contents

权威入口

  • .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. 交付前检查响应式、可访问性与性能边界。

常见陷阱

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

sunflowermm/xrk-agt/tree/main/.cursor/skills/fronted-design commit 51241a5a0d

Frequently asked questions

npx skillmds@latest add sunflowermm/fronted-design