Fronted 设计
- 作者仓库星标 142
- 作者仓库 XRK-AGT
权威入口
.cursor/skills/fronted-design/SKILL.md- 可配合：
.cursor/skills/visual-design-foundations/SKILL.md - 可配合：
.cursor/skills/interaction-design/SKILL.md
适用场景
- 从需求到页面落地的 UI 实现任务。
- 需要提升现有界面的视觉层级与一致性。
- 需要在不改业务逻辑前提下优化体验。
非适用场景
- 不用于替代业务接口设计或数据库建模。
- 不用于无依据的大改风格（需与品牌/产品目标一致）。
执行步骤
- 明确页面目标、核心用户任务与成功标准。
- 设计结构层级：布局、信息密度、主要操作路径。
- 定义视觉规则：颜色、字体、间距、状态反馈。
- 补全交互细节：hover/focus/loading/empty/error。
- 交付前检查响应式、可访问性与性能边界。
常见陷阱
- 只改样式不改信息层级，导致可用性仍差。
- 动效过多影响主任务与页面性能。
- 忽略空态与错误态，导致体验断层。
- 流狐分类
- 设计与多媒体
- 作者声明 Agent
- 未找到明确声明；不据此推断已兼容或已测试
- 静态检查
- 88 / 100 · 启发式扫描，不代表运行安全
- 作者 / 版本 / 许可
- @sunflowermm · 未声明 license
- 流狐 Token 估算
- 低消耗
- 流狐接入估算
- 即装即用
- 是否需要外部 API Key
- 未发现要求
- 检测到的系统要求
- 未声明
- 底层运行要求
- 未声明
- 检测到的文件与系统行为
-
- 只读
- 检测到的网络行为
- 仅限本地
- 安装命令数
- 无（仅作为资料）
档案由构建时根据 SKILL.md 与安装命令自动衍生，可能与作者实际意图存在差异。
需要注意： 未限定 allowed-tools，默认拥有全部工具权限。
作者没有在当前 SKILL.md 中定义固定输出样例。 权威入口
.cursor/skills/fronted-design/SKILL.md 可配合： .cursor/skills/visual-design-foundations/SKILL.md 可配合： .cursor/skills/interaction-design/SKILL.md
适用场景
从需求到页面落地的 UI 实现任务。 需要提升现有界面的视觉层级与一致性。 需要在不改业务逻辑前提下优化体验。
非适用场景
不用于替代业务接口设计或数据库建模。 不用于无依据的大改风格（需与品牌/产品目标一致）。
执行步骤
明确页面目标、核心用户任务与成功标准。 设计结构层级：布局、信息密度、主要操作路径。 定义视觉规则：颜色、字体、间距、状态反馈。
常见陷阱
只改样式不改信息层级，导致可用性仍差。 动效过多影响主任务与页面性能。 忽略空态与错误态，导致体验断层。
## 权威入口
- ` .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. 交付前检查响应式、可访问性与性能边界。
## 常见陷阱
- 只改样式不改信息层级，导致可用性仍差。
- 动效过多影响主任务与页面性能。
- 忽略空态与错误态，导致体验断层。 证据边界与执行链路
作者原文负责流程事实；流狐只索引当前章节、要点、文件与命令。
章节 -> 权威入口 → 适用场景 → 非适用场景 → 执行步骤 → 常见陷阱
要点 -> - 从需求到页面落地的 UI 实现任务。 · - 不用于替代业务接口设计或数据库建模。 · 1. 明确页面目标、核心用户任务与成功标准。 · - 只改样式不改信息层级，导致可用性仍差。
文件/命令 -> .cursor/skills/fronted-design/SKILL.md · .cursor/skills/visual-design-foundations/SKILL.md · .cursor/skills/interaction-design/SKILL.md · hover/focus/loading/empty/error
内容 SHA-256 -> d7331c75f274
原文结构
适用与边界
原文中的明确线索
.cursor/skills/fronted-design/SKILL.md、.cursor/skills/visual-design-foundations/SKILL.md、.cursor/skills/interaction-design/SKILL.md、hover/focus/loading/empty/error