UI Designercomponent Specification

UI组件规范

适用场景

基于设计系统，定义可复用的UI组件规范，确保组件在不同场景下的一致性和完整性。

组件设计原则

1. 完整性：考虑所有状态（默认、悬停、按下、聚焦、禁用、加载、错误）
2. 一致性：同类组件使用相同的设计语言
3. 可访问性：支持键盘导航、屏幕阅读器
4. 响应式：适配不同屏幕尺寸

基础组件规范

1. 按钮 (Button)

变体

尺寸

状态

图标按钮

代码示例

// 主按钮
<Button variant="primary" size="md">确认</Button>

// 次要按钮
<Button variant="secondary" size="md">取消</Button>

// 危险按钮
<Button variant="danger" size="md">删除</Button>

// 禁用状态
<Button variant="primary" size="md" disabled>确认</Button>

// 加载状态
<Button variant="primary" size="md" loading>提交中</Button>

// 带图标
<Button variant="primary" size="md" icon={<IconCheck />}>保存</Button>

// 图标按钮
<IconButton variant="ghost" size="md" icon={<IconClose />} />

2. 输入框 (Input)

尺寸

状态

组成部分

┌─────────────────────────────────────────┐
│ [图标]  [输入内容]            [清除按钮] │
└─────────────────────────────────────────┘
  前缀      输入区域               后缀

• 前缀：图标、文字（如"https://"）
• 输入区域：用户输入的内容
• 后缀：清除按钮、单位（如"元"）、操作按钮

变体

代码示例

// 基础输入框
<Input placeholder="请输入用户名" />

// 带标签
<Input label="用户名" placeholder="请输入用户名" />

// 带前缀图标
<Input prefix={<IconUser />} placeholder="请输入用户名" />

// 带后缀清除按钮
<Input clearable placeholder="请输入关键词" />

// 错误状态
<Input error="用户名不能为空" />

// 禁用状态
<Input disabled value="已禁用" />

// 多行文本
<Textarea rows={4} placeholder="请输入描述" />

// 密码输入
<Input type="password" placeholder="请输入密码" />

// 搜索输入
<Input type="search" placeholder="搜索..." />

3. 选择器 (Select)

尺寸

与Input保持一致（sm / md / lg）

状态

与Input保持一致

下拉菜单

选项状态

4. 复选框 (Checkbox)

尺寸

状态

5. 单选框 (Radio)

尺寸

与Checkbox保持一致

状态

6. 开关 (Switch)

尺寸

状态

7. 卡片 (Card)

规格

变体

组成部分

┌─────────────────────────────────────┐
│  [图片/图标]                         │
│                                     │
│  标题                                │
│  描述文字                            │
│                                     │
│  [操作按钮]                          │
└─────────────────────────────────────┘

8. 标签 (Tag)

尺寸

变体

9. 徽章 (Badge)

尺寸

变体

10. 提示框 (Tooltip)

规格

位置

• top / bottom / left / right
• 自动调整位置避免溢出

输出要求

在UI设计文档中，应包含以下组件规范章节：

## 5. 组件规范

### 5.1 按钮 (Button)
[变体、尺寸、状态表格 + 代码示例]

### 5.2 输入框 (Input)
[尺寸、状态、变体表格 + 代码示例]

### 5.3 [其他组件...]
[根据具体需求补充]

关键原则

1. 状态完整：每个组件都要考虑所有状态
2. 一致性：同类组件使用相同的设计语言
3. 可访问性：支持键盘导航、屏幕阅读器
4. 文档化：提供清晰的代码示例

常见误区

❌ 状态不全：只设计默认状态，忽略悬停、禁用等 ❌ 尺寸不统一：不同组件的尺寸不对齐 ❌ 缺少文档：只有视觉稿，没有规范说明 ❌ 不考虑边界：没有考虑长文本、空状态等边界情况

Source: hashgraph-online/awesome-codex-plugins → plugins/echoVic/boss-skill/skill/skills/ui-designer/component-specification/SKILL.md