界面设计规范

技能简介

本技能提供现代Web与移动端应用的UI/UX设计原则、模式及最佳实践，涵盖2026年设计趋势、Tailwind CSS样式模式、Shadcn/ui组件集成、微交互实现以及移动优先的响应式设计方法。

能做什么

• 构建与设计Web/移动端用户界面
• 选择配色方案、字体排版与布局系统
• 实现移动优先的响应式设计（320px起步）
• 确保WCAG 2.2无障碍合规性
• 搭建Shadcn/ui + Tailwind CSS项目
• 创建微交互与动画效果
• 在编码前评审UI/UX决策

使用说明

环境准备：

1. 安装Node.js环境
2. 初始化Next.js项目：npx create-next-app@latest project-name --typescript --tailwind --app
3. 进入项目目录并初始化Shadcn/ui：cd project-name && npx shadcn@latest init（选择Default风格、基础色、启用CSS变量）

添加组件：

npx shadcn@latest add button card dialog calendar

组件将存放于components/ui/目录，可直接修改源码。

设计流程：

1. 定义配色（主色+中性色+语义色）
2. 确定字体层级（6-8级尺寸）
3. 规划断点（576px/768px/992px/1200px）
4. 检查对比度（正文4.5:1，UI组件3:1）
5. 草拟网格布局（从移动端扩展到桌面端）

输入与输出

见下方输入与输出表格。

风险提示

• 避免使用任意值（如p-[17px]），应使用设计令牌（p-4）
• 动画时长控制在0.2-0.3秒内，仅对transform和opacity属性做动画
• 键盘导航需保证Tab顺序合理，焦点状态可见
• ARIA标签必须为按钮、图片及交互元素添加

来源信息

原始链接：https://github.com/openclaw/skills/tree/main/skills/itsjustdri/ui-ux-design/SKILL.md
来源类型：GitHub仓库