Community编程与开发github.com

产品UX设计/审查

围绕真实用户任务、信息优先级和状态转换,设计和审查产品界面。适用于新建或变更UI流程及界面混乱的情况;非UI任务则跳过界面设计。

审查 是什么?

该技能专注于以用户任务为中心的产品UX设计与审查,强调从用户的实际场景和预期目标出发,而非盲目使用通用仪表板或凭空添加UI元素。它要求设计者基于现有的设计系统、用户研究和已提供的设计稿进行决策,并优先参考特定任务类型的模式文档,而非泛泛而谈。技能覆盖了从屏幕构建前的流程梳理(包括触发器、已知信息、决策点、完成路径和恢复路径),到低 fidelity 布局设计,再到状态建模(初始、加载、空态、失败、成功等),以及交互模式选择(内联编辑、对话框或独立页面)等完整环节。它严格禁止引入新的组件库来应对小改动,并要求在审查环节使用真实浏览器或应用工具进行任务流校验,检查可访问性、响应式布局和视觉质量,同时强调观察与推断的分离,以及避免对未检验的设计进行标签化。该技能适用于Claude Code、Cursor、Codex等AI代理平台,通过结构化的引导和检查点,帮助AI代理产出高质量、用户导向的UX方案。

兼容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/tkddu1591/product-builder/tree/main/plugins/product-builder/skills/product-ux

Installed? Explore more 编程与开发 skills: steipete/bluebubbles, steipete/eightctl, steipete/blucli · View all 6 →

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

以任务为中心的产品UX设计

从用户的实际处境和预期目标开始。现有的设计系统、研究和已提供的设计稿都是证据;不要用一个通用仪表板来替换它们。阅读模式与反例中相关任务类型的部分,而不是每个模式。

构建屏幕之前

对于每个主要角色/任务,识别触发器、已知信息、需要做出的决策、完成结果和恢复路径。当不同角色的工作流决策不同时,将其分离;当任务和上下文真正匹配时,共享屏幕。

生成与变更规模相称的紧凑流程图和低保真布局。对于每个可见区域状态:

  • 用户现在需要哪个决策或操作来触发它?
  • 它是主要的、上下文细节的,还是在此视图中不必要的?
  • 哪个需求、来源或明确的设计决策为其提供了理由?

使用这些来筛选信息,而不是生成更多的产品文案。不要自动添加概览卡片、图表、横幅、过滤器、导航、AI解释或“即将推出”面板。只有当有人做出相关决策时,指标才属于这里。技术来源信息可以在需要判断新鲜度或有效性时纳入;调试日志和实现状态通常应保留在开发记录中。

不要盲目地最小化。保留无障碍说明、有意义的错误信息、必要的上下文、必需的披露以及决策的后果。主要操作是一个有用的默认值,而不是一个任意的单按钮限制。避免仅仅为了减少可见控件而将重要操作隐藏在通用菜单后面。

状态与交互

建模相关状态:初始、加载、空、失败、成功、编辑/未保存、陈旧结果以及权限约束。只使用产品需要的状态。确保选中的输入和显示的结果引用相同的上下文。在可恢复的错误发生时,保留用户的工作。在静默更改会使用户感到意外的情况下,选择显式操作。

当选择编辑界面或更改有状态布局时,阅读交互模式选择。根据任务复杂性、频率、上下文需求和可用空间,选择内联编辑、对话框或独立页面;不要仅仅为了隐藏布局错误而使用模态框。检查重要控件的之前/之后位置、滚动和焦点。有意的信息披露可能会移动内容;偶然的跳转或消失的目标需要修正。

使用项目的设计标记、组件、语言和无障碍约定。通过可用的受支持工具检查提供的参考;缺少Figma MCP本身不是停止的理由。切勿将未经检验的设计标记为匹配。不要仅仅为了一个小改动而引入新的组件库。

在有效/错误/恢复状态下检查可访问名称和描述,而不仅仅是视觉可见性和焦点。当被可访问描述引用时,隐藏的消息仍然可以被暴露;仅在错误适用时连接错误文本。

审查渲染后的流程

使用可用的浏览器或应用程序工具,从实际入口点执行任务。检查结构和控件的标签,以及渲染截图中的层次结构、裁剪、间距和视觉状态。仅靠自动化无障碍检查或DOM检查不能证明视觉或可用性质量。

对于响应式检查,确认浏览器的实际视口尺寸并检查最终捕获的图像。单独裁剪截图、更改元素宽度或检查水平溢出并不是等效的视口测试。如果工具无法设置或验证视口,则标记该覆盖项为未验证。将截图与报告的结果进行核对:缺少内容、不可用的换行或不可见的操作不能仅仅因为DOM检查通过就称为视觉通过。

对于每个发现,记录:复现步骤 → 观察到的行为 → 对用户的影响 → 最小可行的修正 → 重新检查。将推断与观察分开标记。在添加解释之前,优先考虑移除、移动、合并或改进默认值。除非更改或剩余问题证明有必要,否则不要重复已通过的审查。

如果无法访问浏览器,则审查代码/布局证据并将运行时UX标记为未验证;继续独立工作。不要伪造截图、点击或用户验证。开发者或代理的审查不是用户研究。

相关技能