Communitygithub.com

ist-h-i/ui-ux设计

作为所选交付工作流的补充,约束UI构图、视觉完成度、任务可用性和交互证据。

ui-ux设计 是什么?

这是一个专为AI代理设计的技能,旨在补充标准开发工作流,专注于UI/UX设计、实现和审查。它强调以用户证据为基础,关注视觉层次、任务可用性、交互语义、后果意识和可恢复状态。该技能并非替代整个设计生命周期,而是作为执行阶段的补充,避免发明不存在的人员或业务假设。它适用于任何涉及用户可见界面的任务,如屏幕、表单、导航流程或交互状态,并提供了详细的结构化流程,包括锚定证据、选择原则、具体化构图、指定行为、分离后果类别、界定失败边界、细化渲染质量以及连接可用UI能力。输出为结构化的YAML补充文档,记录用户上下文、任务模型、信息模型、交互模型、约束条件和验证场景。该技能在Claude Code、Cursor、Codex等平台上使用,确保UI决策基于可观察的证据,而非推测。

兼容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/ist-h-i/agent-spectrum-kernel/tree/HEAD/skills/ui-ux-design

在你喜欢的 AI 中提问

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

文档

UI/UX 设计约束

目标

将 UI 设计、实现和审查约束在用户可证明的目标、视觉层次和完成度、任务可用性、交互语义、后果意识和可恢复状态上。这是一个执行补充,而不是生命周期替代或视觉设计系统。

使用最小适用的子集。不要发明任务未证明的角色、业务优先级、设备假设、恢复保证或交互行为。

何时使用

仅在通用交付工作流已选定且任务更改或审查具有以下一个或多个信号的对用户可见的界面时使用此技能:

  • 屏幕、表单、导航流程、选择或主要操作;
  • 焦点、选中、禁用、加载、成功、错误、完成或其他交互状态;
  • 有后果性或可逆的用户操作;
  • 部分数据/渲染失败、陈旧或缺失数据、重试或恢复行为;
  • 措辞影响任务完成或错误恢复的 UI 语言。

不要将其用于非 UI 工作、纯机器消费的输出,或作为加载每个 UX 问题的理由。特定项目的品牌、用户、术语、关键流程和业务规则仍属于项目上下文。

流程

  1. 锚定到证据。 确定已知的用户目标、使用上下文、首先要注意的信息、操作优先级、完成/下一步操作以及约束条件。为此目的选择密度和构图:比较工作区和产品介绍需要不同的处理方式。现有合同是输入,而不是质量上限;在范围内重新审视观察到的弱点。仅停止那些依赖于后果性缺失事实的决策,而不发明角色或工作流。
  2. 选择适用的原则和模式。 仅阅读 references/principles.md、references/decision-patterns.md 和 references/anti-patterns.md 的相关部分。记录它们为何适用。将示例视为证据提示,而非全局禁令。
  3. 使构图具体化。 将分组、顺序、文本层次和换行、对齐锚点、间距、图像和控制关系连接到任务。在添加解释之前,优先考虑清晰的结构/状态;保留所需含义和可访问标签。对于日语,根据其显示位置和状态判断标签、目标/结果措辞和反馈,而不仅仅是语法;根据以下发现规则使用可用的 japanese-expression 能力。
  4. 指定行为。 定义适用的启示/指示符、状态语义、即时反馈、过渡、焦点/当前状态、延续以及等效交互路径。显式标记不适用的问题;不要制造悬浮、拖拽、手势或运动行为。
  5. 分离后果类别。 区分提交前取消、完成可逆更改后的撤销以及提交更改后的补偿操作。对于不可逆或实质性后果的操作,在提交前显示目标、范围、后果和恢复限制。不要为低风险的可逆操作添加全面的确认。
  6. 界定失败范围。 在独立区域失败时,保持健康、授权、语义有效区域和用户输入可用。在受影响区域保持未解决的失败可见,使重试范围化,并验证重试结果。区分加载、合法为空、缺失、陈旧、部分和完成状态。不要为零填充缺失数据或暴露其前提条件不完整的派生操作。仅在授权、安全、一致性或依赖语义需要时扩展阻塞范围。
  7. 细化并验证实际渲染。 在实现过程中,在优化控件之前检查一个代表性的整体屏幕,然后细化相关的组件细节、窄布局和状态,然后再进行独立审查。分别判断视觉完成度、任务可用性和功能性行为;有效的点击、相等的 CSS 值和无溢出并不构成完成度。执行适用的过渡、键盘/焦点、实际撤销、提交前取消、保留输入和范围化重试。截图支持静态外观,而不是恢复或状态恢复。使用 references/ui-capability-contract.md 中的观察和交接规则。
  8. 连接可用的 UI 能力。 遵循 references/ui-capability-contract.md 进行仅合同、现有合同构建或直接 UI 请求。将原则所有权保留在此,从活动环境解析外部能力所有者,并保留合同到实现到证据的链接。能力或运行时差距仅停止受影响的依赖工作,且绝不视为完成审查。
  9. 将约束交还给所选工作流。 requirement-grill、grill-design、controlled-implementation、test-first-verification、审查门禁和最终合并门禁保留其职责。此补充缩小了 UI 决策的范围;它本身不授权实现或批准。

输出

在当前任务的决策记录中发出一个有限的补充。对于局部调整,仅记录更改的决策和受影响证据;不需要新的 JSON 合同或填写模板。省略不相关字段或使用 not_applicable: <reason>;绝不要推测性地填写它们。

UX 补充:
  user_context:
    user_goal:
    usage_context:
    known_constraints:
    capability_or_environment_considerations:
  task_model:
    page_or_flow_goal:
    primary_action:
    completion_state:
    next_action:
  information_model:
    required_information:
    secondary_information:
    omit:
    language_required_for_clarity:
  interaction_model:
    affordances_and_signifiers:
    state_semantics:
    action_feedback:
    transition_behavior:
    consistency_expectations:
    direct_manipulation:
    equivalent_interaction_paths:
  inclusion_constraints:
    single_cue_dependencies_to_avoid:
    error_prevention:
    recovery_paths:
    input_and_effort_constraints:
  resilience_and_consequences:
    action_reversibility_and_limits:
    pre_commit_consequences:
    failure_boundaries_and_dependencies:
    safe_remaining_content_and_actions:
    partial_failure_and_freshness_feedback:
    scoped_retry_and_recovery_refs:
    blocking_conditions:
  applicable_patterns:
  anti_patterns:
  implementation_constraints:
  verification_scenarios:
  stop_conditions:

每个验证场景命名检查的状态和可观察的关系。对于交互,添加操作/输入、预期可见和底层状态,以及适用的恢复/延续结果。将设计决策保留在现有信息模型和实现约束中,而不是创建另一个模式。

退出标准

  • 补充仅因当前证据包含 UI 信号而连接。
  • 用户、产品、品牌和业务假设已被获取或标记为未知。
  • 主要任务和下一步操作更清晰,而无需删除必需的语义。
  • 对于渲染的 UI 判断,构图和组件完成度有区别于功能性检查的渲染证据;仅合同的工作指定观察标准而不声称实际屏幕批准。通过的合同并不否决观察到的粗糙度。
  • 动态声明有交互/状态证据要求,而不仅仅是截图证明。
  • 在适用时区分可逆、不可逆、部分失败和基础性阻塞行为。
  • 在独立失败和重试期间,保持健康状态和用户输入。
  • 通用工作流和最终审查权限保持不变。

相关技能