mcpField
I
interaction-design

interaction-design

github.com/podo设计与 UI29228 次安装4 天前更新
代码仓库

关于 interaction-design

interaction-design 是面向 Agent 的交互设计技能,涵盖流程、组件状态、微交互和设计审查,适合编写交互规范及评估设计决策的设计师与产品团队。

主要功能

  1. 01任务流程与导航模式
  2. 02组件状态与反馈
  3. 03微交互时序指南
  4. 04可供性与交互原则
  5. 05规范编写与审查清单

适用场景

  1. 01梳理任务或导航流程
  2. 02定义加载、错误和成功状态
  3. 03编写交互行为交接文档
  4. 04依据交互原则审查设计

安装

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

$npx skills add https://github.com/podo/design-agent-skills --skill interaction-design

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

附带文件stub.yaml

详细介绍

交互设计

目录占位页 — 完整技能:rastian/interaction-design-skills

决策树

  1. 是否已安装完整技能?

    • 全局: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 步
  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 -y
    

    Claude 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