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 对比度）在某些品牌场景下可能限制创意发挥，需权衡商业需求与合规要求。

核心用法

ui-design 是一个纯文档型的 UI/UX 设计综合技能，为开发者提供从布局到动效的完整设计决策框架。核心用法包括：

1. 设计决策参考——在构建新组件或页面时查询具体的 CSS 实现方案、网格/弹性布局选择策略
2. 设计质量审查——对照预交付清单检查排版、色彩对比度、响应式断点、可访问性合规性
3. 风格定位——从五大设计方向（极简、奢华、活泼、编辑、工业）中选择并执行一致的视觉语言

显著优点

• 系统性极强：将 UI 设计拆解为可量化的决策树（Grid vs Flexbox 选择表、80/20 质量法则、8px 间距体系）
• 生产导向：提供可直接复制的 CSS 代码片段、设计令牌架构、WCAG 合规的具体数值标准
• 反模式明确：每个章节包含「常见错误-问题-修复」对照表，避免新手踩坑
• 可访问性优先：内置完整的 WCAG 2.1 AA 合规检查清单，而非事后补救
• 零学习成本：纯 Markdown 文档，无需配置，即查即用

潜在局限

• 技术栈偏向：示例代码以现代 CSS（Grid、自定义属性、clamp()）为主，旧浏览器支持需额外处理
• 设计方向有限：五大风格分类虽实用，但面对混合风格或品牌定制需求时需灵活调整
• 无交互原型：仅提供代码和原则，不涉及 Figma/Sketch 等设计工具的工作流
• 静态内容：作为文档型技能，不包含实时设计预览或 AI 生成界面的功能

适合人群

• 全栈开发者需要快速产出专业界面而无需专职设计师
• 前端工程师进行设计代码审查（Design QA）
• 独立开发者/Maker 构建 MVP 和产品落地页
• 设计系统负责人建立团队内部的 Token 体系和组件规范

常规风险

• 设计建议≠品牌策略：提供的配色、字体建议为通用最佳实践，实际商用需考虑品牌一致性
• 外部链接依赖：文档引用 Google Fonts 等外部资源，企业内网环境需确认可用性
• 代码片段需适配：直接复制的 CSS 代码需根据具体项目的技术栈（Tailwind、CSS-in-JS 等）转换