Back to Details

ui-designer

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

UI Designer Skill

UI Designer 技能

When to Apply

适用场景

Apply this skill when the request involves:
  • UI/screen design, component design, information architecture, design system, visual hierarchy, layout structure, tone and manner
  • 画面設計、UI方針、コンポーネント設計、情報設計、トーン&マナー、デザインシステム、画面の骨格
  • Working with design files or design-related commands
当需求涉及以下内容时，可应用此技能：
  • UI/界面设计、组件设计、信息架构、设计系统、视觉层级、布局结构、视觉风格
  • 界面设计、UI规范、组件设计、信息架构、视觉风格、设计系统、界面框架
  • 处理设计文件或设计相关指令

Core Principles

核心原则

  • UI is not art, it's decision support. Help users achieve their goals as quickly as possible.
  • Systematize repetition. Componentize repeated UI patterns; use tokens to prevent inconsistency.
  • Specs include states. A complete spec covers loading, error, empty, and disabled states.
  • UI不是艺术，而是决策支持工具。 帮助用户尽可能快速达成目标。
  • 系统化重复内容。 将重复的UI模式组件化；使用tokens避免设计不一致。
  • 规范需覆盖全状态。 完整的规范要包含加载、错误、空态和禁用状态。

Design Philosophy (Decision Rules)

设计理念（决策规则）

  1. Prioritize first. Decide what users see first vs. what can wait.
  2. Don't cram everything. Use progressive disclosure to reveal information in stages.
  3. Always define states. Normal / loading / empty / error / no-permission must be specified.
  4. Enforce consistency through rules. Components, tokens, spacing, and typography create coherence.
  5. Leave no ambiguity for implementers. Specs should be precise, not vague prose.
  1. 优先排序。 明确用户首先看到的内容和可延后展示的内容。
  2. 不堆砌内容。 使用渐进式披露分阶段展示信息。
  3. 始终定义全状态。 必须明确常态/加载/空态/错误/无权限状态。
  4. 通过规则确保一致性。 组件、tokens、间距和排版需保持统一。
  5. 不给开发者留模糊空间。 规范必须精准，不能是模糊的描述。

Initial Questions to Clarify

需明确的初始问题

  • What is the screen's goal? (What counts as success?)
  • Who is the primary user? (Persona / usage context)
  • What is the primary action?
  • What are the edge cases? (Empty / error / permission / slow network)
  • What is the reuse scope? (Page-specific or cross-cutting?)
  • 该界面的目标是什么？（成功的判定标准是什么？）
  • 核心用户是谁？（用户画像/使用场景）
  • 核心操作是什么？
  • 有哪些边缘场景？（空态/错误/权限/网络缓慢）
  • 复用范围是什么？（仅针对当前页面还是跨场景通用？）

Output Format (Follow This Order)

输出格式（按以下顺序）

  1. Screen purpose / success criteria
  2. Information architecture (priority, structure)
  3. Component proposal (responsibility, props, states)
  4. Token / style guidelines (colors, spacing, typography)
  5. Edge state specs (empty / error / loading)
  6. Next actions (prototype → implementation)
  1. 界面目标/成功判定标准
  2. 信息架构（优先级、结构）
  3. 组件方案（职责、属性、状态）
  4. 令牌/样式指南（颜色、间距、排版）
  5. 边缘状态规范（空态/错误/加载）
  6. 后续动作（原型制作 → 开发落地）

Common Pitfalls

常见误区

  • Edge states left undefined, leading to ad-hoc implementation
  • Visual inconsistencies not captured in tokens, causing magic numbers to proliferate
  • Unclear screen purpose, causing element bloat
  • 未定义边缘状态，导致开发时临时处理
  • 视觉不一致未通过tokens统一，导致出现大量“魔法数值”
  • 界面目标不明确，导致元素冗余