使用16+种设计系统（包括Material You、Fluent Design、Apple HIG、Ant Design等）设计精美界面。
UI 设计师 Skill.
功能概述
UI 设计师 Skill.是一项面向实际任务的技能，主要用于Expert 设计指南,用于创建美学取悦,用户中心界面,跨越多种设计语言. 这一技能侧重于视觉和结构设计 i。它将相关步骤、工具调用和结果整理方式集中到统一流程中，帮助使用者更快完成目标并减少重复操作。
核心要点
- 使用时应结合输入条件选择合适的执行方式，核对必要参数、依赖环境与输出内容，并按原始要求处理异常情况。
- 该技能适合需要稳定复用相关能力的场景，可作为自动化工作流的一部分，也便于后续检查、调整和扩展。
- 从功能定位来看，该技能强调把分散的操作要求整理成清晰、可复用的处理流程，使用户能够围绕既定目标快速准备输入、选择执行方式并获得结构化结果。
使用与执行
实际使用前应先确认任务范围、数据来源、运行环境、必要权限和关键参数，再依据技能说明逐步执行；若输入条件不完整，应先补齐信息或采用保守配置，避免因错误假设导致结果偏离需求。
结果检查与注意事项
执行过程中需要关注工具调用是否成功、接口或依赖是否可用、输出格式是否符合预期，并对异常提示、缺失字段和边界情况进行处理；涉及批量任务时，还应保存进度，避免中断后重复操作。
UI 设计师技能
提供专业级设计指导，助力构建跨多种设计语言的美观、以用户为中心的界面。本技能聚焦于实现前及实现过程中的视觉与结构设计意图。
核心能力
1. 色彩方案生成
根据项目调性，生成协调且和谐的专属配色方案。
- 交付物：HEX 颜色代码、Tailwind 配置扩展、CSS 自定义变量。
- 配色风格：默认采用高端柔色系、暗黑奢华风或基于 Material You 的同色调色板。
2. 组件主题化
通过一致的设计标记（design tokens）构建稳健的主题系统（明/暗色模式）。
- 定义
--bg、--text、--accent和--border等 CSS 变量。 - 确保所有 UI 元素在悬停（hover）、聚焦（focus）、激活（active）等状态下的视觉表现统一。
3. 无障碍审计
评估并优化界面，以实现最大程度的包容性与合规性。
- 关注重点：WCAG AA/AAA 对比度、语义化 HTML 及直观的导航逻辑。
- 优化建议：合理使用 ARIA 属性、焦点环（focus ring）管理、屏幕阅读器友好性支持。
设计系统库（共 16 套）
| 类别 | 系统 | 核心特征 | 适用场景 | 参考文档 |
|---|---|---|---|---|
| 企业级 | Fluent Design | 亚克力材质、显露动效、五大设计原则 | Windows 应用、Microsoft 365、企业级产品 | fluent-design.md |
| 企业级 | Ant Design | 自然感设计、8px 网格系统、12 列布局 | 管理后台、B2B 应用、数据密集型产品 | ant-design.md |
| 企业级 | Carbon Design | 16 列网格、IBM Plex 字体、强调清晰性 | 企业软件、数据可视化应用 | carbon-design.md |
| 企业级 | Atlassian Design | 风格大胆、侧重协作、8px 网格系统 | 项目管理工具、团队协作平台 | atlassian-design.md |
| 平台级 | Apple HIG | SF Pro 字体、活力感（vibrancy）、模糊材质、44pt 触控目标 | iOS、macOS 原生应用 | apple-hig.md |
| 平台级 | Shopify Polaris | 面向商家、清新风格、青绿色品牌主调 | 电商应用、商家运营工具 | shopify-polaris.md |
| 现代风 | Material You | 动态色彩、大圆角、同色调色板 | Android 应用、现代 Web 应用 | material-you.md |
| 现代风 | Glassmorphism | 背景模糊（backdrop blur）、高饱和渐变 | 仪表盘、首页横幅（hero section） | glassmorphism.md |
| 现代风 | Neumorphism | 柔和 3D 效果、双阴影、单色系 | 创意类项目、极简 UI | neumorphism.md |
| 现代风 | Neo-Brutalism | 粗边框、硬阴影、高饱和色彩 | 创意机构、艺术化品牌 | neo-brutalism.md |
| 现代风 | Claymorphism | 柔和 3D 效果、双重内阴影、活泼风格 | 趣味性应用、消费类产品 | claymorphism.md |
| 经典风 | Minimalism | 排版驱动、充足留白 | 内容型网站、作品集站点 | minimalism.md |
| 经典风 | Swiss Design | 12 列网格、无阴影、非对称布局 | 专业服务类网站、强调排版的场景 | swiss-design.md |
| 经典风 | Skeuomorphism | 真实质感、物理拟态 | 奢侈品产品、复古主题 | skeuomorphism.md |
| 混合风 | M3 Pastel Glass | Material + Glass 混合、28px 圆角 | 现代 SaaS 产品、创意工具类应用 | m3-pastel-glass.md |
| 混合风 | Neo-M3 Hybrid | Brutalism + M3 混合、3px 边框、硬阴影 | 科技媒体、编辑类网站 | neo-m3-hybrid.md |
自动化：Cursor 集成
本技能可自动更新项目中的 .cursorrules 文件，使 AI 始终与您的设计目标保持一致。
apply_ui_rules.py
运行该脚本，将设计规则追加至当前目录下的 .cursorrules 文件中。
python3 $WORKSPACE/skills/ui-designer-skill/scripts/apply_ui_rules.py --style [fluent|ant|carbon|atlassian|apple-hig|polaris|material|minimal|glass|neumorphism|neo-brutalism|claymorphism|skeuomorphism|swiss|m3-pastel|neo-m3] --palette [pastel|dark|vibrant|mono]
工作流
1. 设计构思阶段
启动新功能开发时，请明确以下问题：
- 主要设计语言？（可从 16+ 种系统中选择：Fluent、Ant、Carbon、Atlassian、Apple HIG、Polaris、Material You、Glassmorphism、Neumorphism、Neo-Brutalism、Claymorphism、Minimalism、Swiss Design、Skeuomorphism，或各类混合风格）
- 色彩调性？（柔色系、暗色系、高对比度、单色系、品牌专属色）
- 目标平台？（Web、iOS、Android、桌面端、跨平台）
2. 组件架构设计
规划 HTML / React 结构，并搭配 Tailwind 工具类；重点关注 Grid / Flex 布局与响应式适配。
最佳实践
- 一致性：每个项目应严格限定使用一种设计语言。
- 无障碍性：确保文本具备足够的对比度。
- Azzar 法则：“以恰到好处的工程投入，把事情做好。”（Wong edan mah ajaib）
热门AI工具
相关专题
本专题聚焦Go-Zero的API开发，拆解.api描述文件的语法结构、路由与分组定义、参数绑定与校验规则，说明统一响应体、JWT鉴权、跨域与接口文档生成的落地方式，并给出网关聚合与接口测试的实践建议。
0
2026.11.12
本专题围绕Go-Zero的安装与工具链配置展开，讲清Go版本要求、goctl安装方式、代理镜像、protoc依赖与环境变量设置，说明多版本共存、升级回退与CI流水线安装的做法，并整理安装阶段的常见报错与验证步骤。
0
2026.11.12
本专题整理Go-Zero的入门知识，从框架定位、环境准备到跑通第一个API服务，讲清目录分层、配置加载、日志与中间件的基本用法，并对比Gin、Kratos的差异，帮助Go开发者建立整体认知，判断它是否适合当前项目。
0
2026.11.12
本专题从实际API接口调试场景出发，讲解Postman身份认证的完整配置流程，包括常见认证协议介绍、授权参数设置、访问令牌填写、OAuth 2.0授权及认证失败排查，帮助用户正确完成接口授权与访问验证。
0
2026.11.06
围绕Postman HTTP请求头配置展开，讲解Headers选项的具体使用方式，包括Key和Value参数填写、请求头信息添加、常见Header字段设置及请求头修改方法，帮助用户解决接口调试过程中遇到的请求头配置问题。
0
2026.11.06
详细介绍Postman接口请求的创建与发送方法，涵盖GET和POST请求、URL配置、请求参数、Headers请求头、Body请求体设置以及响应结果查看，帮助用户掌握Postman接口请求的完整操作流程。
0
2026.11.06
DBeaver数据导入专题，整理Excel、CSV、SQL、TXT等常见文件的数据导入方法，涵盖目标数据库选择、数据表创建、字段映射、数据类型设置及导入参数配置等操作，帮助用户将本地文件中的数据写入数据库，并了解批量导入、重复数据处理和导入失败等常见问题的解决方法。
0
2026.11.05
DBeaver安全防护专题，围绕数据库连接安全、账号密码保护和访问权限管理展开，整理SSL/TLS加密连接、SSH隧道、数据库凭据保存及证书验证等配置方法，同时介绍敏感信息保护、远程连接风险和高权限账号使用等注意事项，帮助用户提高数据库日常管理的安全性。
0
2026.11.05
本专题聚焦DBeaver数据库连接配置与管理，覆盖从新建连接、选择数据库类型到填写连接参数和验证连接的完整流程。针对MySQL、PostgreSQL、SQL Server等常见数据库，整理相应的连接设置方法，并提供驱动缺失、认证失败和连接异常等问题的排查方向。
0
2026.11.04
热门下载
相关下载
精品课程
共6课时 | 12.1万人学习
共79课时 | 161.8万人学习
共6课时 | 54.7万人学习
最新文章
