关于 focus-attention-design
一项通过减少干扰并让用户控制打断来支持专注的界面设计技能，涵盖屏幕层级、通知行为、平静的视觉设计和时间限制。
主要功能
- 01每个屏幕突出一个主要操作
- 02允许用户控制打断
- 03平静的视觉设计
- 04遵循减少动态效果偏好
- 05时间限制设计指引
适用场景
- 01检查存在多个竞争性操作的界面
- 02设计可关闭且不阻塞操作的提醒
- 03减少任务流程中的干扰
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/focus-attention-design确认已加载。
详细介绍
专注与注意力设计
设计界面，帮助人们专注于当前任务：去除不必要的干扰，并让用户能够掌控自己的注意力环境。
核心原则
屏幕上的每个元素都应服务于用户当前的任务。 如果某个元素只对业务有用、对用户无益，那它就是一种干扰。
设计模式
单一用途
- 每个屏幕或区域只设置一个主要操作
- 在视觉上弱化次要操作（缩小尺寸、使用柔和的颜色、设为文本链接）
- 移除对任务没有帮助的装饰元素
- 将高级选项隐藏在“显示更多”或“高级”后面
- 尽可能依次呈现选项，而不是同时呈现
控制打断
- 不要自动播放音频或视频
- 不要弹出未经用户操作触发的弹窗
- 允许用户关闭或延后通知
- 显示任何模态框之前先保存状态 — 关闭模态框不得导致工作丢失
- 未经用户操作，不得从屏幕上移除内容
- 如果需要显示横幅或提醒，应允许用户关闭，且不得阻塞操作
视觉平和
- 区域之间留出充足的空白
- 限制配色方案（UI 元素使用 3–4 种颜色）
- 使用柔和的边框和分隔线，避免粗重线条
- 不要使用闪烁、明灭或快速变化的内容
- 动画仅用于提供功能反馈（加载、过渡）
- 始终遵循 prefers-reduced-motion
时间敏感性
- 除非绝对必要，否则不要设置时限
- 如果存在时限，应在时限到期前尽早提醒
- 提供简便的延长方式（点击一次即可，不要多步操作）
- 每项必需决策至少留出 20 秒
- 在有时限的场景中自动保存进度
- 对于会话超时：保存状态，并允许用户无缝返回
评估问题
对于每个屏幕，问自己：
- 用户在这里应该做的一件事是什么？
- 这件事是否是视觉上最突出的元素？
- 屏幕上有什么会争夺注意力？能否移除或弱化？
- 用户能否控制打断（通知、模态框、自动播放）？
- 是否存在无益于用户的刻意紧迫感？
需要指出的反模式
- 对非时间敏感操作使用倒计时
- “只剩 2 个！”之类的紧迫感文案
- 自动播放视频或音频
- 多个相互争抢注意力的行动号召
- 未经请求就弹出的聊天组件
- 在任务区域附近移动或带动画的广告
- 会转移用户注意力的布局偏移
评论
支持 Markdown