ui-design

ui-design 是一项专注于 Web 界面设计的综合型知识技能，旨在为开发者提供从基础理论到实战落地的完整设计体系。该技能覆盖了现代 UI 开发的各个维度，包括布局策略、排版系统、色彩理论、间距规范、响应式设计、无障碍访问以及动效设计等核心领域。

核心用法方面，该技能主要服务于三类场景：首先是新界面构建，开发者可在设计组件或页面时参考其中的设计模式与代码示例；其次是设计质量审查，通过其提供的检查清单（Pre-Delivery Checklist）评估现有界面的专业度；最后是设计系统搭建，利用其三层 Token 架构（Primitives-Semantic-Component）建立可维护的视觉规范。

显著优点体现在其系统性与实用性并重。技能采用"80/20 法则"明确设计优先级，指出排版与间距占视觉质量的 65%，帮助开发者聚焦关键决策。同时提供大量可直接落地的 CSS 代码片段，如 clamp() 流体布局、Grid/Flexbox 决策矩阵、WCAG 对比度标准等，兼顾理论深度与工程实践。此外，严格遵循无障碍访问标准（WCAG 2.1），强制要求颜色对比度、键盘导航、焦点样式等，确保产出的合规性。

潜在局限性包括：作为纯文档型技能，其不包含自动化工具或脚手架，无法直接生成代码；来源为 T3 级个人开发者（GitHub: wpank），虽内容透明可审计，但建议企业用户结合官方设计系统（如 Material Design、Ant Design）交叉验证；且主要面向原生 CSS 开发，缺乏 React、Vue 等框架的特定实现示例。

适合目标群体涵盖前端开发者（希望提升设计审美）、全栈工程师（需要快速构建精致界面）、UI 设计师（寻求工程化落地参考）以及产品经理（理解设计约束）。尤其适合追求"反 AI 塑料感"（anti-AI slop）的独立开发者，帮助其建立独特的产品视觉识别。

使用该技能的常规风险主要在于性能与合规层面：虽然提供的 CSS 示例遵循最佳实践（如使用 transform 而非 width/height 做动画），但实际项目中仍需测试渲染性能；设计 Token 的命名规范可能与现有项目冲突，需要适配成本；且无障碍相关建议（如 4.5:1 对比度）在某些品牌场景下可能限制创意发挥，需权衡商业需求与合规要求。