UI/UX Design Guide

核心用途

本Skill为开发者提供全面的UI/UX设计知识体系，覆盖从设计原则到技术实现的完整工作流。核心功能包括：移动优先响应式设计策略、8px基线排版系统、语义化颜色方案构建、Shadcn/ui+Tailwind CSS技术栈集成、WCAG 2.2无障碍合规指南，以及微交互设计最佳实践。

显著优点

• 零学习成本启动：提供可直接落地的设计令牌（Design Tokens）和代码片段，无需设计背景即可产出专业界面
• 技术栈深度整合：原生支持当下最流行的前端组合——Shadcn/ui组件库+Tailwind CSS，包含完整的初始化命令和组件添加流程
• 无障碍优先内置：将WCAG 2.2合规要求融入日常开发流程，提供具体的对比度数值（4.5:1/3:1）和键盘导航检查清单
• 趋势前瞻性：标注2026年设计趋势，避免方案过时
• 实战验证：引用Linear、Stripe、Vercel等顶级产品的设计模式作为学习范本

潜在局限性

• 框架锁定风险：重度依赖Shadcn/ui+Tailwind生态，若团队使用MUI、Chakra UI或纯CSS方案需额外转换
• 设计深度有限：提供的是「开发者友好」的设计规范，复杂品牌视觉系统仍需专业设计师介入
• 静态内容更新滞后：WCAG标准、Tailwind版本演进需人工跟进，内置的"2026趋势"存在时效性边界
• 移动端偏重：桌面端复杂布局模式（如多窗口管理、数据密集型仪表板）覆盖相对薄弱

适合人群

• 全栈开发者需要快速产出美观前端界面
• 初创团队缺乏专职UI设计师时的过渡方案
• 前端工程师系统学习设计系统构建方法
• 需要确保产品无障碍合规的技术负责人

常规风险

• 过度依赖工具链：Shadcn/ui组件自定义空间有限，深度定制可能陷入"覆盖样式地狱"
• 无障碍合规形式主义：仅满足对比度数值不等于真正无障碍，需配合真实用户测试
• 视觉同质化：套用相同Tailwind预设易导致"千篇一律的SaaS风"，需结合品牌差异化调整

UI/UX Design 技能评估

核心用途

本技能为纯文档型设计指导系统，覆盖现代Web/移动应用界面开发的完整方法论。核心用法包括：

• 设计系统构建：8px基线网格、配色系统（主色+中性色+语义色）、6-8级排版比例
• 技术栈集成：Shadcn/ui + Tailwind CSS 项目初始化与组件管理
• 响应式实现：移动优先（320px起）→576/768/992/1200px断点策略
• 无障碍合规：WCAG 2.2标准（4.5:1文本对比度、3:1 UI对比度、键盘导航）
• 微交互设计：hover/click状态动画（transform/opacity动画，0.2-0.3s时长）

显著优点

1. 权威技术整合：2026年设计趋势+行业标杆实践（Linear、Stripe、Vercel设计模式）
2. 零学习成本：纯Markdown文档，无环境依赖，即开即用
3. 生产就绪：包含完整CLI命令、代码片段、预构建检查清单
4. 无障碍优先：内置对比度检查工具链接与ARIA标签规范
5. S+安全认证：100分安全评级，零代码执行风险

局限性

• 无自动化工具：仅为指导文档，不提供设计Token生成、对比度计算等自动化功能
• 框架限定：主要面向React/Next.js生态（Shadcn/ui依赖），Vue/Svelte开发者需自行适配
• T3来源：个人开发者维护，无企业背书，长期更新依赖社区
• 静态内容：设计趋势标注"2026"，需手动跟踪行业变化

适合人群

| 人群 | 适用度 | 说明 |

|------|--------|------|

| 前端开发者（React） | ⭐⭐⭐⭐⭐ | 直接匹配技术栈，开箱即用 |

| 独立开发者/全栈 | ⭐⭐⭐⭐⭐ | 快速建立专业设计系统 |

| UI设计师→前端转型 | ⭐⭐⭐⭐ | 设计原则到代码的桥梁 |

| 无障碍合规团队 | ⭐⭐⭐⭐ | WCAG 2.2快速参考手册 |

| Vue/Svelte开发者 | ⭐⭐⭐ | 需自行转换Tailwind类名逻辑 |

常规风险

• 无技术风险：纯文档无执行代码、无网络调用、无依赖
• 内容风险极低：引用URL均为行业公信站点（Figma、Tailwind官网、WebAIM）
• 使用风险：代码示例需按实际项目调整，直接复制可能引发样式冲突
• 维护风险：T3级社区项目，建议Fork后自主维护或关注官方更新