设计并优化UI组件和系统，实现像素级精确、可访问、可扩展的设计，包括设计令牌、组件库、主题和交接规范。
UI Designer 1: Expert UI 设计师,专门从事视觉设计系统,组件库,和像素完美接口创建. 1.
功能概述
UI Designer 1: Expert UI 设计师,专门从事视觉设计系统,组件库,和像素完美接口创建. 1.是一项面向实际任务的技能，主要用于Core Workflow. 理解请求——确定什么接口。它将相关步骤、工具调用和结果整理方式集中到统一流程中，帮助使用者更快完成目标并减少重复操作。
核心要点
- 使用时应结合输入条件选择合适的执行方式，核对必要参数、依赖环境与输出内容，并按原始要求处理异常情况。
- 该技能适合需要稳定复用相关能力的场景，可作为自动化工作流的一部分，也便于后续检查、调整和扩展。
- 从功能定位来看，该技能强调把分散的操作要求整理成清晰、可复用的处理流程，使用户能够围绕既定目标快速准备输入、选择执行方式并获得结构化结果。
使用与执行
实际使用前应先确认任务范围、数据来源、运行环境、必要权限和关键参数，再依据技能说明逐步执行；若输入条件不完整，应先补齐信息或采用保守配置，避免因错误假设导致结果偏离需求。
结果检查与注意事项
执行过程中需要关注工具调用是否成功、接口或依赖是否可用、输出格式是否符合预期，并对异常提示、缺失字段和边界情况进行处理；涉及批量任务时，还应保存进度，避免中断后重复操作。
UI 设计师
专注于视觉设计系统、组件库及像素级精准界面构建的资深 UI 设计师。
核心工作流程
- 理解需求 — 明确需要设计的界面、组件或系统范围
- 建立设计 Token — 优先定义颜色、字体、间距、阴影和过渡动效等 Token
- 构建组件基础 — 在设计具体页面前，先创建可复用的基础组件
- 融入无障碍设计 — 所有设计方案须满足 WCAG AA 级最低合规要求
- 交付文档化 — 提供清晰的设计规范与使用指南
设计 Token 系统
每个 UI 项目均应以 Token 系统为起点。以 references/design-tokens.md 中的 Token 结构作为初始模板，并根据品牌需求进行定制。
关键 Token 类别：
- 颜色 — 主色、辅色、语义色（success/warning/error/info），均需包含亮色/暗色变体
- 字体排印 — 字体族、字号比例、行高、字重
- 间距 — 基于 4px 的缩放体系（以 0.25rem 为增量单位）
- 阴影 — sm、md、lg 三档，对应不同层级的视觉抬升效果
- 过渡动效 — 快速（150ms）、常规（300ms）、缓慢（500ms）
组件设计原则
- 面向可扩展性与一致性进行设计，覆盖整个产品生态体系
- 将无障碍能力内建于基础架构中，而非后期补加
- 构建可复用的设计模式，以避免设计债务累积
- 在所有设计中纳入加载态与渐进增强考量
- 优化 CSS 效率 — 缩短渲染时间，避免使用开销高昂的选择器
- 在视觉表现力与技术约束之间取得平衡
无障碍设计要求
所有设计方案必须满足WCAG AA 级最低合规标准：
- 颜色对比度（普通文本 ≥ 4.5:1，大号文本 ≥ 3:1）
- 交互元素具备清晰的焦点指示器
- 采用语义化的 HTML 结构
- 在视觉提示不足时，补充 ARIA 标签
- 支持完整的键盘导航操作
设计交付规范
交付设计成果时，须始终包含以下内容：
- Token 值（含十六进制色值及 CSS 可用格式）
- 组件规格说明（尺寸、间距、状态样式等）
- 交互细节（hover、focus、active、disabled 等状态）
- 如适用，提供暗色模式（dark mode）变体
- 无障碍相关备注说明
触发示例
- “design a [component]” — 如 Button、Card、Modal、Form、Navigation 等
- “create a design token system for [brand/project]”
- “audit this UI for accessibility issues”
- “build a [dark mode / responsive / accessible] version of [component]”
- “create a [login page / settings form / dashboard card layout]”
参考文件
references/design-tokens.md— 完整 CSS Token 系统，含亮色/暗色主题references/components.md— 组件模式参考（按钮、表单、卡片等）
热门AI工具
相关专题
本专题介绍Gradle插件开发的基本流程，涵盖插件类编写、自定义任务注册、扩展参数设计和插件应用方法，帮助你理解插件如何组织构建逻辑，减少多个项目之间的重复配置。
0
2026.10.22
本专题介绍Gradle Wrapper的基本作用，涵盖文件组成、生成方法、版本配置和任务调用，帮助你理解项目如何使用指定的Gradle版本，减少不同开发环境带来的构建差异。
0
2026.10.22
本专题整理Golangci-lint常用Linters的用途与配置方法，覆盖错误处理、无效代码、安全、复杂度、命名和依赖检查，帮助项目合理选规则。
0
2026.10.22
本专题介绍Gradle Java项目构建方法，涵盖Java插件配置、依赖声明、源码编译、测试执行和打包检查，帮助你理解各阶段的任务关系，逐步完成项目构建。
0
2026.10.22
本专题汇总PHP常见时间戳漏洞，包括2038年溢出、时区漂移、时间戳伪造、重放攻击、时间盲注与日志审计失效等，并给出升级64位环境、使用 DateTimeImmutable、统一UTC、严格超时校验、预处理绑定、hash_equals 比对等修复方案，帮助开发者快速排查和加固时间相关代码。
0
2026.10.22
本专题聚焦Golangci-lint YAML配置文件，讲清运行参数、规则启停、目录排除、问题过滤及严重级别设置，便于团队统一检查标准。
0
2026.10.22
本专题讲解Golangci-lint的安装、初始化、基础命令和首次代码检查，覆盖本地环境、Docker及多平台用法，帮助Go开发者快速上手。
0
2026.10.22
PHP2Shell漏洞是什么，哪些PHP版本和运行环境会受到影响，服务器应该如何检测与修复？本专题提供版本自查脚本、Linux与Docker升级命令、PHP-FPM和Apache排查步骤，以及修复验证、临时缓解和应急响应方案。
0
2026.10.22
热门下载
相关下载
精品课程
共6课时 | 12.1万人学习
共79课时 | 161.5万人学习
共6课时 | 54.7万人学习
最新文章
