关于 ui-designer
用于屏幕、组件、信息架构和设计系统工作的 UI 设计技能，帮助团队将用户目标转化为优先级清晰、一致的设计规格，并涵盖交互状态和实现细节。
主要功能
- 01定义屏幕目标与成功标准
- 02安排信息和操作优先级
- 03说明组件及其状态
- 04制定 Token 与样式规范
- 05覆盖加载、错误和空状态
- 06明确实现细节
适用场景
- 01设计屏幕布局
- 02定义可复用 UI 组件
- 03创建信息架构
- 04记录实现所需的边缘状态
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/ui-designer确认已加载。
详细介绍
UI 设计技能
适用场景
在请求涉及以下内容时应用此技能：
- UI／屏幕设计、组件设计、信息架构、设计系统、视觉层级、布局结构、语气与风格
- 画面设计、UI 方针、组件设计、信息设计、语气与风格、设计系统、画面的整体结构
- 使用设计文件或与设计相关的命令
核心原则
- UI 不是艺术，而是辅助决策的工具。 帮助用户尽可能快速地实现目标。
- 将重复内容系统化。 将重复的 UI 模式组件化；使用令牌避免不一致。
- 规格应包含各种状态。 完整的规格应涵盖加载、错误、空内容和禁用状态。
设计理念（决策规则）
- 优先确定轻重缓急。 决定用户首先看到什么，以及哪些内容可以稍后再看。
- 不要塞入所有内容。 使用渐进式呈现，分阶段展示信息。
- 始终定义各种状态。 必须明确规定正常／加载／空内容／错误／无权限状态。
- 通过规则确保一致性。 组件、令牌、间距和排版共同构成整体协调性。
- 让实现人员不留疑问。 规格应当明确，而非含糊的描述。
需要澄清的初始问题
- 屏幕的目标是什么？（什么情况算成功？）
- 主要用户是谁？（用户画像／使用场景）
- 主要操作是什么？
- 有哪些边界情况？（空内容／错误／权限／网络缓慢）
- 复用范围是什么？（仅限特定页面，还是跨页面复用？）
输出格式（按以下顺序）
- 屏幕用途／成功标准
- 信息架构（优先级、结构）
- 组件方案（职责、属性、状态）
- 令牌／样式指南（颜色、间距、排版）
- 边界状态规格（空内容／错误／加载）
- 后续操作（原型 → 实现）
常见问题
- 未定义边界状态，导致临时决定如何实现
- 未通过令牌记录视觉上的不一致，导致神奇数字不断增多
- 屏幕用途不明确，导致元素过多
评论
支持 Markdown