mcpField
F
fronted-design

fronted-design

github.com/xrkseek设计与 UI13462 次安装10 周前更新
代码仓库

关于 fronted-design

面向 Cursor 的 UI 设计技能，涵盖从信息层级、视觉规则到交互状态和交付检查的页面实现流程。适用于新页面开发及不改变业务逻辑的体验优化。

主要功能

  1. 01明确页面目标与成功标准
  2. 02规划布局和信息层级
  3. 03定义视觉规则与交互状态
  4. 04检查响应式、无障碍性和性能

适用场景

  1. 01根据需求实现 UI
  2. 02改善视觉层级与一致性
  3. 03在不改业务逻辑时优化体验

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/xrkseek/xrk-agt --skill fronted-design

安装后在 Claude Code 中输入/fronted-design确认已加载。

详细介绍

来自项目 README

权威入口

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

常见陷阱

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

评论

支持 Markdown