前端设计
- 作者仓库星标 141
- 作者更新于 实时读取
- 作者仓库 CataForge
- 领域
- 设计与多媒体
- 兼容 Agent
-
- Claude Code
- Cursor
- Cline
- Codex
- Windsurf
- Gemini CLI
- +20
- 信任分
- 88 / 100 · 社区维护
- 作者 / 版本 / 许可
- @lync-cyber · 未声明 license
- Token 消耗评级
- 低消耗
- 接入复杂程度
- 即装即用
- 是否需要外部 API Key
- 不需要
- 兼容的系统
- 未声明(默认跨平台)
- 底层运行要求
- 无特殊要求
- 文件与系统权限
-
- 只读
- 允许写入 / 修改
- 网络行为
- 仅限本地
- 安装命令数
- 26 条
档案由构建时根据 SKILL.md 与安装命令自动衍生,可能与作者实际意图存在差异。
需要注意: 未限定 allowed-tools,默认拥有全部工具权限。
---
name: ui-design
description: UI设计 — 页面布局、组件规范、交互流程、组件目录维护。当需要做 UI 设计、定义设计 token、规划页面与组件、设计交互流程或维护组件目录时使用。 基于Step 1确立的设计方向定义To…
category: 设计与多媒体
runtime: 无特殊运行时
---
# ui-design 输出预览
## PART A: 任务判断
- 适用问题:视觉内容、演示材料、信息图或设计交付。
- 输入要求:目标材料、限制条件、期望输出和验收方式。
- 证据边界:围绕“能力边界 / 输入规范 / 输出规范”读取原文规则,不把推断写成作者承诺。
## PART B: 执行结果
- **01** 任务判断:确认你的需求是否属于视觉内容、演示材料、信息图或设计交付,并标出输入、限制和预期结果。
- **02** 执行计划:优先按“能力边界 / 输入规范 / 输出规范”拆成步骤,说明每一步会读取什么、修改什么、产出什么。
- **03** 交付结果:给出可复制的命令、文件改动、检查清单或内容草稿,并说明如何继续迭代。
- **04** 风险边界:结合 读取文件、写入/修改文件、主要在本地完成、通常不需要额外 API Key 给出执行前确认项。
## Running Rules
- 读取文件、写入/修改文件;主要在本地完成;通常不需要额外 API Key。
- 先小样例验证,再放大到真实任务。
- 交付时同时给结果、检查口径和下一步迭代建议。 先确认触发方式
原文没有稳定的斜杠命令要求。安装验证后通常全局生效,直接在对话里点名这个 Skill 并描述任务即可。
给清楚输入和边界
告诉 Agent 目标文件或材料、期望结果、不可改范围、是否允许联网或执行命令。本 Skill 的权限画像是:读取文件、写入/修改文件。
小样例验证后再放大
先用一个小任务确认它会围绕“能力边界 / 输入规范 / 输出规范”工作;涉及文件或命令时,先看 diff、日志、预览或测试结果。
复核后再交付
检查最终产物是否包含明确结果、必要证据和下一步动作;如果输出泛泛而谈,就补充输入、边界和验收标准后重跑。
---
name: ui-design
description: UI设计 — 页面布局、组件规范、交互流程、组件目录维护。当需要做 UI 设计、定义设计 token、规划页面与组件、设计交互流程或维护组件目录时使用。 基于Step 1确立的设计方向定义To…
category: 设计与多媒体
source: lync-cyber/CataForge
---
# ui-design
## 什么时候使用
- 把设计与视觉方向的常用动作沉淀成 Agent 可调用的技能 适合处理界面、视觉、封面、信息图或演示材料交付,核心价值是把输入、判断、执行、验证和交付边界固定下来,避免 Agent 泛泛回答。 把任务拆成可执行、可检查、可继续迭代的步骤…
- 面向视觉内容、演示材料、信息图或设计交付,优先处理能明确输入、步骤和验收标准的工作。
## 需要提供什么
- 目标材料、目录范围、期望结果和不可改动内容。
- 是否允许联网、执行命令、读写文件或调用外部服务。
## 执行规则
- 围绕「能力边界 / 输入规范 / 输出规范」组织步骤,不把推断写成作者事实。
- 读取文件、写入/修改文件;主要在本地完成;通常不需要额外 API Key。
- 先跑小样例,确认结果可检查后再扩大任务范围。
## 输出要求
- 给出最终产物、关键证据、验证方式和下一步动作。
- 信息不足时标记 unknown,不编造命令、平台或依赖。 证据边界与执行链路
作者原文负责流程事实;仓库文件负责来源和命令;流狐只补充适用场景、限制和质量判断。
skill "ui-design" {
输入层 -> 用户目标 + 目标文件 + 禁止范围 + 验收标准
上下文层 -> 能力边界 / 输入规范 / 输出规范
规则层 -> SKILL.md 触发条件 / 执行顺序 / 输出格式
运行层 -> 无特殊运行时 | 读取文件、写入/修改文件 | 主要在本地完成
安全层 -> 通常不需要额外 API Key + 小任务验证 + diff / 日志复核
输出层 -> 可复制结果 + 检查清单 + 下一步迭代
} UI设计 (ui-design)
能力边界
- 能做: 设计方向决策、设计系统token定义、页面布局决策、组件规范定义、交互流程、响应式策略、组件目录维护(C-NNN注册/去重/合并)、设计token一致性检查
- 不做: 需求分析、架构设计、代码实现、从 Penpot 设计稿生成代码骨架(由 penpot-implement 负责)
输入规范
- prd#§2功能需求(F-{NNN})
- arch#§2模块划分(M-{NNN})
- 用户对产品调性和视觉偏好的输入(Step 1采集)
输出规范
- 设计方向声明(调性/风格参考/视觉策略)
- 设计系统token(色彩/排版/间距),含设计意图说明
- 组件清单(C-{NNN}),含变体、Props和视觉说明
- 页面布局(P-{NNN}),含路由、状态流和空间构成说明
- 导航与路由表
- 响应式断点策略
执行流程
Step 1: 设计方向决策(产出任何Token前必须完成)
理解产品上下文,确立设计方向:
- 用户与场景: 产品服务什么人?在什么环境使用?(办公桌前/通勤中/嘈杂车间)
- 产品调性: 通过user-interview向用户确认调性方向,提供具体选项而非开放提问。示例选项:
- 专业克制(企业工具/数据平台) vs 活泼亲和(消费端/社交)
- 信息密集(仪表盘/管理后台) vs 内容聚焦(阅读/展示)
- 科技感(深色/渐变/动效) vs 朴素实用(浅色/清晰/快速)
- 视觉参考: 询问用户是否有喜欢的产品或网站作为参考。有参考时提取其视觉特征(配色倾向/排版密度/圆角程度/留白比例)作为设计输入
- 产出: 在ui-spec §0写入设计方向声明(2-3句),后续所有Token和组件决策须可追溯到此方向
Step 2: 设计系统Token定义(对应ui-spec §1)
基于Step 1确立的设计方向定义Token,每个Token选择须有设计意图:
色彩体系:
- 确立主色(brand)、语义色(success/warning/error/info)、中性色(背景/文字/边框)
- 主色与辅色之间应有明确的主次关系——主色占视觉主导,辅色用于强调和引导,避免多个颜色平均分配
- 中性色不只是灰色,应从主色中提取色相倾向(暖灰/冷灰/蓝灰)以保持色彩体系的一致感
- 确保对比度满足WCAG AA标准(正文≥4.5:1,大标题≥3:1)
排版体系:
- 选择与产品调性匹配的字体,说明选择理由。西文字体与中文字体需分别指定并确认混排效果
- 定义清晰的字号层级(标题/副标题/正文/辅助文字),层级之间有可感知的视觉差异
- 行高和字重定义完整(非仅指定font-family)
间距与圆角:
- 使用一致的间距基数(如4px/8px倍数)
- 圆角程度与产品调性一致(企业工具偏小圆角2-4px,消费产品可用较大圆角8-16px)
Step 3: [Penpot可选] Token同步
若 {INSTRUCTION_FILE} 设计工具 为 penpot,调用 penpot-sync 将token同步到Penpot项目和 tokens.css
Step 4: 页面与组件规划
从PRD功能需求推导页面和组件需求:
- 先规划页面(P-NNN):按用户任务流组织,不是按功能模块罗列
- 再推导组件(C-NNN):从页面需求中提取可复用的交互单元
Step 5: 组件定义(对应ui-spec §2)
为每个组件定义完整规范:
- 变体: 不仅列出状态名(default/hover/active/disabled/error),还需描述各状态的视觉差异(如hover时颜色变化方向、disabled时的透明度处理)
- Props: 类型定义完整
- 视觉说明: 组件的空间比例、内间距、关键视觉特征(如按钮的高度比例、图标与文字的间距关系)
- 交互说明: 关键交互行为和反馈方式
Step 6: 页面布局(对应ui-spec §3)
为每个页面定义布局:
- 空间构成: 描述页面的空间节奏——哪里密集(操作区)、哪里留白(呼吸空间)、视觉重心在哪里
- 布局描述: 区域划分、组件排列方式,足以让开发者还原而无需猜测
- 状态流: loading/empty/populated/error 四态的具体视觉表现(如loading用骨架屏还是加载动画,empty态的引导文案和插图)
Step 7: 响应式策略
- 定义断点和各断点下的布局变化
- 说明哪些组件在小屏下隐藏、折叠或变形
Step 8: 组件目录维护
- 整理组件需求,去重合并同类组件
- 检查组件间一致性(token引用、命名风格)
- 确保组件复用,避免重复定义
- Token变量化,确保全局一致
Step 9: [Penpot可选] 设计一致性验证
若 {INSTRUCTION_FILE} 设计工具 为 penpot,调用 penpot-review 验证设计文件与ui-spec的一致性
Anti-Patterns
- 禁止: 跳过 Token 阶段直接画组件 —— Token 是设计系统基础,未先确立会让组件层风格漂移,后期返工成本高
- 禁止: 在 ui-spec 写交互逻辑细节("点击后弹出 X 然后 Y")—— 交互流转属于产品需求层,ui-spec 只承载视觉与结构契约
- 禁止: 用截图 / 图片代替组件结构描述 —— ui-spec 必须是文字可索引的契约,否则 implementer 无法精确还原也无法被 reviewer 校对
- 避免: 一次设计所有页面 —— 按 P-xxx 分批,每批闭环 Token → 组件 → 页面,避免后期单点改动引发全局连锁
效率策略
- 设计方向先行,避免Token定义完成后才发现方向不对
- 设计系统先行,确保组件一致性
- 组件复用优先,减少重复定义
先判断是否适合
作者设计意图
作者的方法与取舍
边界和复核