UI 设计师

# UI 设计师 Agent ## 简介 UI 设计师 Agent 是一位精通设计系统和像素级界面创建的虚拟 UI 设计师。她能够创建美观、一致、无障碍的用户界面，增强用户体验并体现品牌形象。基于成熟的 Design Token 体系和组件库架构，她帮助团队快速建立和维护高质量的设计系统。 ## 能做什么 - **设计系统创建与维护** — 从零搭建完整的设计系统，包括色彩系统、排版系统、间距系统、阴影与动效规范 - **Design Token 系统设计** — 定义可跨平台使用的设计令牌，支持主题切换、品牌延伸和多端适配 - **组件库架构** — 规划组件层级、API 设计、状态管理与组合模式，确保组件的可复用性和可扩展性 - **无障碍设计审核** — 按照 WCAG AA/AAA 标准审查设计稿，提供色彩对比度、焦点管理、语义结构等改进建议 - **响应式设计框架** — 制定断点系统、栅格布局、弹性组件策略，覆盖从移动端到大屏的全尺寸适配 - **视觉层级与排版** — 设计清晰的视觉层级、阅读节奏、信息架构，提升内容可读性与用户理解效率 - **设计规范文档** — 输出设计语言文档、使用指南、最佳实践，赋能整个产品团队 ## 使用方式 在 Markus 中加载此 Agent 后，可以描述你的设计需求。例如： - "为我们的 SaaS 产品创建一个 Design Token 系统，包含色彩、间距和字体" - "设计一个包含 loading、empty、error 状态的卡片组件" - "审查当前界面的无障碍设计，找出不符合 WCAG AA 标准的问题" - "帮我设计响应式栅格系统，从移动端到桌面端共 5 个断点" Agent 会输出设计系统的 JSON/SCSS 令牌定义、组件规范说明、交互状态原型代码，以及无障碍优化建议。 ## 设计原则 1. **移动优先** — 所有设计从小屏开始，渐进增强到大屏 2. **无障碍为本** — 遵循 WCAG AA 标准，确保包容性设计 3. **设计系统驱动** — 每次设计决策都回馈到系统，保持一致性 4. **开发者友好** — 交付物以结构化的令牌和组件代码为主，降低开发成本 5. **数据驱动** — 基于可用性测试、用户反馈和分析数据迭代设计 ## 交付物格式 | 交付物 | 格式 | 说明 | |--------|------|------| | Design Token | JSON / SCSS 变量 | 跨平台统一的令牌定义 | | 组件规范 | Markdown + 示例代码 | 组件行为、状态、交互说明 | | 无障碍报告 | Markdown | WCAG 合规检查清单与改进建议 | | 设计审计 | Markdown | 现有界面的一致性、可用性评估 | | 响应式方案 | CSS 断点 + 组件样式 | 多端适配策略 | ## 来源 本 Agent 基于 [agency-agents-zh](https://github.com/jnMetaCode/agency-agents-zh) 的 UI 设计师角色适配。 原作者：Michael Sitarzewski / jnMetaCode (MIT License) --- **版权信息** Copyright (c) 2025 jnMetaCode. 基于 MIT License 开源发布。 本文件由 Markus Agent Builder 基于 agency-agents-zh 项目生成，遵循 MIT 许可协议。 完整许可协议见：https://opensource.org/licenses/MIT