Practical UI Design 是一套基于规则的视觉 UI 设计系统技能，由 Peter Bamuhigire 分享。它用于在需要可复用判断、领域约束或成熟工作流（而非临时建议）的任务中，提供系统化的视觉设计指导。
一、用途与适用场景 该技能覆盖色彩、排版、间距、布局、按钮、表单与视觉一致性，适合需要系统级设计决策的任务。它可与任意平台技能搭配加载：本技能提供视觉系统（色彩、字体、间距、组件），平台技能提供实现代码。当产品已存在时，应先审计 token 漂移、重复组件和不一致状态，再提出新的样式方案。
二、主要能力
- 色彩系统（基于 HSB）：使用 HSB（色相 0-360、饱和度 0-100、亮度 0-100）做设计决策，仅在实现时转换为 HEX/RGB。也提供 OKLCH 替代方案，用于感知均匀的色彩操作，确保不同色相下视觉重量一致。建议先以黑白设计界面，最后再有目的地加入颜色；避免纯黑与纯白文字；中性色需带 2-5% 品牌色相，不使用纯灰。
- 单品牌色与单色调色板：仅需 1 个品牌色 + 5 个同色相色调变化。品牌色只用于交互元素（按钮、文字链接、激活状态），不用于标题或非交互元素。若品牌色已有强含义（如红色代表错误），交互元素使用最深变体或改用蓝色；若品牌色过浅（如黄色），按钮文字和链接使用最深变体，并为按钮加边框以满足 3:1 对比度。技能给出了浅色调色板（示例色相 230）与深色调色板（示例色相 166）的 token 表，包含 Primary、Darkest、Dark、Medium、Light、Lightest、White 等 token 的 HSB 值、用途与对比度要求。
- 系统色：红=错误、琥珀=警告、绿=成功、蓝=信息。系统色文字对比度 ≥ 4.5:1，仅图标/组件 ≥ 3:1，且必须搭配图标，不能仅靠颜色传达信息。
- 对比度规则（WCAG 2.1 AA）：小文本（≤18px 常规、≤14px 粗体）≥ 4.5:1；大文本（>18px 粗体或 >24px 常规）≥ 3:1；UI 组件（输入框、单选、复选）≥ 3:1；纯装饰元素无要求。另附 APCA（WCAG 3 草案）参考值：正文首选 90、最低 75，其他文本 60，大文本与 UI 45，占位符 30，非文本 15。
- 其他主题：排版规则、布局与间距、UI 文案、按钮、表单（快速参考）、组件模式、深色模式规则、反模式与设计检查清单。这些扩展内容位于 references/skill-deep-dive.md，以保持入口文件紧凑、加载快速。
三、使用方式 先阅读 SKILL.md，再按需加载引用的深度文件；按技能中的有序指导、检查清单和决策规则执行，而非挑选孤立片段；产出交付物时明确假设、风险与后续工作。需要视觉一致性时使用 references/visual-consistency.md；涉及比例、字号阶梯、间距、宽高比、色彩步进、流式尺寸或动效时序的数学一致性时，搭配 responsive-design/references/math-for-web-design.md；视觉质量需支撑高端定价、高管信任、证明、服务打包或高客单价产品感知时，搭配 premium-software-product-execution。
四、可搭配的伴随技能 webapp-gui-design（Web 应用仪表盘、管理面板、SaaS UI）、jetpack-compose-ui（Android 原生 Kotlin/Compose）、form-ux-design（深度表单模式）、healthcare-ui-design（严格无障碍的临床级界面）、pos-sales-ui-design（销售点与零售录入界面）、ux-psychology（规则背后的认知科学基础）、laws-of-ux（命名定律速查，如 Fitts、Hick、Miller）、ai-slop-prevention（捕捉通用 AI 生成 UI 模式的质量门）、motion-design（动画时序、缓动与微交互标准）、ux-writing（按钮、错误、空状态的微文案标准）、responsive-design（移动优先、容器查询、指针检测）、frontend-performance（Core Web Vitals、图像与渲染优化）、design-audit（带严重度评级的全面 UI 质量审计）、premium-software-product-execution（高端产品/服务打包、证明、买家信任与定价力要求）。
五、质量标准和反模式 输出应面向执行、简洁，并与仓库基线工程标准一致；除非技能明确要求更高标准，否则保持与现有项目约定兼容；优先确定性、可审查的步骤，而非模糊建议或工具魔法；优先系统级修复而非逐屏装饰性修复；将设计系统视为有文档化 token、组件和使用规则的活产品。反模式包括：把示例当作可复制粘贴的真理而不检查适配性、约束或失败模式；默认加载所有参考文件而非渐进式披露。
六、产出与证据 产出为贴合任务的具体结果：实现指导、审查发现、架构决策、模板或生成产物；当无法仅凭现有上下文完成任务时，明确假设、权衡或未解决缺口；当参考、伴随技能或后续行动能实质提升执行时予以列出。证据示例：UX 质量类产物为 Practical UI 审计 Markdown 文档，覆盖调色板、字号阶梯、间距、按钮状态和表单模式，示例路径 docs/ux/practical-ui-audit-checkout.md。
七、限制 该技能不适用于与 practical-ui-design 无关的任务，或更适合由更具体的伴随技能处理的任务；若请求只需简单答案，且本技能的约束或参考无实质帮助，则不应使用。所需输入包括：收集相关项目上下文、约束和要解决的具体问题，按需加载参考；确认期望交付物（设计、代码、审查、迁移计划、审计或文档）。