name: ui-designer description: 使用Material You、极简主义、玻璃拟态、新粗野主义、粘土拟态设计美观界面。精通Tailwind CSS、色彩和谐、组件主题化和无障碍访问（WCAG）。

UI设计师技能

为创建美观、以用户为中心的界面提供专家设计指导。此技能侧重于实施前和实施期间的视觉和结构设计意图。

核心能力

1. 色彩调色板生成

生成与项目氛围相协调、和谐的调色板。

交付物：HEX代码、Tailwind配置扩展和CSS变量。
调色板：默认为高端柔和色、暗黑奢华或色调化Material You集合。

2. 组件主题化

通过一致的设计令牌建立健壮的主题系统（浅色/深色）。

定义 --bg、–text、–accent 和 --border 变量。
确保所有UI元素的状态（悬停、聚焦、激活）统一。

3. 无障碍访问审计

评估并优化界面以实现最大的包容性和合规性。

重点：WCAG AA/AAA对比度、语义化HTML和直观导航。
指导：ARIA属性、焦点环管理和屏幕阅读器友好性。

核心设计语言

1. Material You (M3)

关键特征： 大圆角、色调化调色板、富有表现力的排版。
参考： material-you.md

2. 极简主义

关键特征： 充足的留白、排版驱动的层次结构、中性调色板。
参考： minimalism.md

3. 玻璃拟态

关键特征： 背景模糊、细边框、鲜艳的背景渐变。
参考： glassmorphism.md

4. 新粗野主义

关键特征： 粗黑边框、硬阴影、鲜艳的冲突色彩、粗体排版。
参考： neo-brutalism.md

5. 粘土拟态

关键特征： 柔和的3D形状、双重内阴影、大圆角半径、俏皮的柔和色彩。
参考： claymorphism.md

6. M3柔和玻璃（混合）

关键特征： 柔和蓝/深蓝、28px圆角、变形悬停效果。
参考： m3-pastel-glass.md

7. 新M3混合（Wired/Verge风格）

关键特征： 受Wired/Verge启发的高对比度、3px实心黑边框、硬阴影（6px+）、24px圆角、色调化柔和强调色。
参考： neo-m3-hybrid.md

自动化：Cursor集成

此技能可以自动更新您项目的.cursorrules，以保持AI与您的设计目标一致。

`apply_ui_rules.py`

运行此脚本将设计规则附加到当前目录的.cursorrules文件中。

python ~/.gemini/skills/ui-designer/scripts/apply_ui_rules.py --style [material|minimal|glass|neo-brutalism|claymorphism|m3-pastel|neo-m3] --palette [pastel|dark|vibrant]

工作流程

1. 设计构思

开始新功能时，询问：

主要设计语言？（Material You、极简主义、玻璃拟态、新粗野主义、粘土拟态、M3柔和玻璃、新M3混合）
色彩氛围？（柔和、暗黑、高对比度）

2. 组件架构

使用Tailwind类规划HTML/React结构。专注于网格/弹性布局和响应式设计。

最佳实践

一致性： 每个项目坚持一种设计语言。
无障碍访问： 确保文本有足够的对比度。
Azzar法则： “恰到好处的工程，把事情做好。” (Wong edan mah ajaib)。