关于 interaction-design
interaction-design 是面向 Agent 的交互设计技能,涵盖流程、组件状态、微交互和设计审查,适合编写交互规范及评估设计决策的设计师与产品团队。
主要功能
- 01任务流程与导航模式
- 02组件状态与反馈
- 03微交互时序指南
- 04可供性与交互原则
- 05规范编写与审查清单
适用场景
- 01梳理任务或导航流程
- 02定义加载、错误和成功状态
- 03编写交互行为交接文档
- 04依据交互原则审查设计
安装
复制下面的命令,在终端中运行。
$
npx skills add https:/ / github.com/ podo/ design-agent-skills --skill interaction-design安装后在 Claude Code 中输入/interaction-design确认已加载。
附带文件stub.yaml
详细介绍
交互设计
目录占位页 — 完整技能:rastian/interaction-design-skills
决策树
-
是否已安装完整技能?
- 全局:
f=~/.agents/skills/interaction-design/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer" - 项目:
f=.agents/skills/interaction-design/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer" installed→ 技能已作为interaction-design安装,调用该技能并继续pointer→ 转到第 2 步
- 全局:
-
检测作用范围,然后安装:
[ -e ~/.agents/skills/interaction-design ] && echo "global" || echo "project"全局:
npx skills add rastian/interaction-design-skills --skill interaction-design -g -y项目:
npx skills add rastian/interaction-design-skills --skill interaction-design -yClaude Code: 发送以
!开头的命令作为聊天消息,即可在不离开对话的情况下运行命令。
注意事项
- 许可证: 仓库中没有 LICENSE 文件
安装后调用
- 技能名称:
interaction-design - 触发短语:"interaction design"、"interaction flow"、"component states"、"micro-interaction"、"affordance"、"interaction spec"
功能介绍
一本面向从业者的交互设计指南,涵盖基础原则、实用的状态设计、流程规范和交互评审:
- 交互流程 — 任务流程、用户流程、导航模式、决策树
- 状态设计 — 组件的完整状态集:默认、悬停、焦点、激活、禁用、加载中、错误、成功、空状态、骨架屏
- 微交互 — 触发条件 → 规则 → 反馈 → 循环模型;时间和缓动指南
- 可供性 — 符号、反馈、约束、映射、一致性、可发现性
- 交互设计原则 — Norman 的原则(《设计心理学》)和 Tognazzini 的《交互设计第一原则》
- 响应时间 — 100ms/1s/10s 阈值、进度指示器、乐观 UI
- 交互规范 — 交接标注格式、交互规范文档
- 交互审计 — 根据既定原则进行评审的检查清单
安装包包含一个 reference/ 文件夹,其中有该技能所引用的原则、响应时间以及模式与流程说明。
不适用场景
- UX 用户旅程映射 + Playwright 测试 → 使用
neo-user-journey - 动画和动作时间设置 → 使用
gsap-skills或framer-motion-skills - WCAG 无障碍审计 → 使用
wcag-ai-skill - 完整 UX 策略 → 使用
ux-designer-skill
评论
支持 Markdown