图像设计
- 作者仓库星标 142
- 作者更新于 实时读取
- 作者仓库 XRK-AGT
- 领域
- 设计与多媒体
- 兼容 Agent
-
- Claude Code
- Cursor
- Cline
- Codex
- Windsurf
- Gemini CLI
- +20
- 信任分
- 88 / 100 · 社区维护
- 作者 / 版本 / 许可
- @sunflowermm · 未声明 license
- Token 消耗评级
- 低消耗
- 接入复杂程度
- 即装即用
- 是否需要外部 API Key
- 不需要
- 兼容的系统
- 未声明(默认跨平台)
- 底层运行要求
- 无特殊要求
- 文件与系统权限
-
- 只读
- 允许写入 / 修改
- 网络行为
- 仅限本地
- 安装命令数
- 26 条
档案由构建时根据 SKILL.md 与安装命令自动衍生,可能与作者实际意图存在差异。
需要注意: 未限定 allowed-tools,默认拥有全部工具权限。
---
name: fronted-design
description: 当需要设计或实现高质量前端页面/组件(Web UI、美化、落地页、控制台)时使用。 完全本地运行;兼容 Claude Code, Cursor, Cline 等 26 个 Agent。
category: 设计与多媒体
runtime: 无特殊运行时
---
# fronted-design 输出预览
## PART A: 任务判断
- 适用问题:视觉内容、演示材料、信息图或设计交付。
- 输入要求:目标材料、限制条件、期望输出和验收方式。
- 证据边界:围绕“权威入口 / 适用场景 / 非适用场景”读取原文规则,不把推断写成作者承诺。
## PART B: 执行结果
- **01** 任务判断:确认你的需求是否属于视觉内容、演示材料、信息图或设计交付,并标出输入、限制和预期结果。
- **02** 执行计划:优先按“权威入口 / 适用场景 / 非适用场景”拆成步骤,说明每一步会读取什么、修改什么、产出什么。
- **03** 交付结果:给出可复制的命令、文件改动、检查清单或内容草稿,并说明如何继续迭代。
- **04** 风险边界:结合 读取文件、写入/修改文件、主要在本地完成、通常不需要额外 API Key 给出执行前确认项。
## Running Rules
- 读取文件、写入/修改文件;主要在本地完成;通常不需要额外 API Key。
- 先小样例验证,再放大到真实任务。
- 交付时同时给结果、检查口径和下一步迭代建议。 先确认触发方式
原文没有稳定的斜杠命令要求。安装验证后通常全局生效,直接在对话里点名这个 Skill 并描述任务即可。
给清楚输入和边界
告诉 Agent 目标文件或材料、期望结果、不可改范围、是否允许联网或执行命令。本 Skill 的权限画像是:读取文件、写入/修改文件。
小样例验证后再放大
先用一个小任务确认它会围绕“权威入口 / 适用场景 / 非适用场景”工作;涉及文件或命令时,先看 diff、日志、预览或测试结果。
复核后再交付
检查最终产物是否包含明确结果、必要证据和下一步动作;如果输出泛泛而谈,就补充输入、边界和验收标准后重跑。
---
name: fronted-design
description: 当需要设计或实现高质量前端页面/组件(Web UI、美化、落地页、控制台)时使用。 完全本地运行;兼容 Claude Code, Cursor, Cline 等 26 个 Agent。
category: 设计与多媒体
source: sunflowermm/XRK-AGT
---
# fronted-design
## 什么时候使用
- 当需要设计或实现高质量前端页面/组件(Web UI、美化、落地页、控制台)时使用 适合处理界面、视觉、封面、信息图或演示材料交付,核心价值是把输入、判断、执行、验证和交付边界固定下来,避免 Agent 泛泛回答。 把任务拆成可执行、可检…
- 面向视觉内容、演示材料、信息图或设计交付,优先处理能明确输入、步骤和验收标准的工作。
## 需要提供什么
- 目标材料、目录范围、期望结果和不可改动内容。
- 是否允许联网、执行命令、读写文件或调用外部服务。
## 执行规则
- 围绕「权威入口 / 适用场景 / 非适用场景」组织步骤,不把推断写成作者事实。
- 读取文件、写入/修改文件;主要在本地完成;通常不需要额外 API Key。
- 先跑小样例,确认结果可检查后再扩大任务范围。
## 输出要求
- 给出最终产物、关键证据、验证方式和下一步动作。
- 信息不足时标记 unknown,不编造命令、平台或依赖。 证据边界与执行链路
作者原文负责流程事实;仓库文件负责来源和命令;流狐只补充适用场景、限制和质量判断。
skill "fronted-design" {
输入层 -> 用户目标 + 目标文件 + 禁止范围 + 验收标准
上下文层 -> 权威入口 / 适用场景 / 非适用场景
规则层 -> SKILL.md 触发条件 / 执行顺序 / 输出格式
运行层 -> 无特殊运行时 | 读取文件、写入/修改文件 | 主要在本地完成
安全层 -> 通常不需要额外 API Key + 小任务验证 + diff / 日志复核
输出层 -> 可复制结果 + 检查清单 + 下一步迭代
} 权威入口
.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。
- 交付前检查响应式、可访问性与性能边界。
常见陷阱
- 只改样式不改信息层级,导致可用性仍差。
- 动效过多影响主任务与页面性能。
- 忽略空态与错误态,导致体验断层。
先判断是否适合
作者设计意图
作者的方法与取舍
边界和复核