Menu
Por padrão, está selecionado o prompt que primeiro revisa a origem. Você pode mudar para um comando direto ou baixar uma cópia local.
Leia o SKILL.md e os arquivos complementares exibidos pelo SkillsMP antes de decidir se vai instalar.
Baseado na classificação ocupacional SOC
Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.
Um comando direto ignora o prompt de revisão. Verifique a origem antes de executá-lo.
npx skills add https://github.com/echoVic/boss-skill --skill ui-designer-component-specificationO comando permanece em uma só linha. Role horizontalmente para revisá-lo antes de copiar.
Prefere uma cópia local? Baixe os arquivos disponíveis atualmente no SkillsMP.
Exibindo SKILL.md
可审计的 agent 团队：BMAD 全自动研发流水线编排器。编排 9 个专业 Agent（PM、架构师、UI Designer、Tech Lead、Scrum Master、Frontend、Backend、QA、DevOps）从需求到部署，每一步都有事件溯源 + 不可绕过门禁 + 确定性 eval——可验证测试真跑、门禁真过。支持单环节切片命令（/boss:plan /review /qa /ship）与无 CLI 纯 Markdown 降级。 Triggers: 'boss mode', '/boss', '全自动开发', '从需求到部署', '帮我做一个', 'build this', 'ship it', '全流程', '自动化开发', '一键开发', 'start a project', 'new feature' Does NOT trigger: - 单文件修改或简单 bug 修复（直接编辑即可） - 纯代码阅读或解释（使用 read 工具） - 已有 pipeline 正在运行时的重复启动 - 极小事（预计 <30 分钟人工可完成、不需要 PRD/架构/门禁记录） Output: 完整项目代码 + PRD/架构/UI/测试/部署文档，写入 .boss/<feature>/ 目录
设计变体模式，产出2-3个设计方案及 tradeoff 分析，供用户选择后确定最终方案
后端测试编写指南，包括单元测试、集成测试和E2E测试的编写方法和最佳实践
| name | ui-designer/component-specification |
| description | UI组件规范，定义按钮、输入框、卡片等基础组件的变体、尺寸、状态 |
| version | 1.0.0 |
| agent | ui-designer |
| type | guideline |
| user-invocable | false |
| agent-invocable | true |
| dependencies | ["ui-designer/design-system"] |
| triggers | ["需要设计组件时","需要定义组件规范时","前端开发需要组件文档时"] |
基于设计系统，定义可复用的UI组件规范，确保组件在不同场景下的一致性和完整性。
| 变体 | 用途 | 视觉特征 |
|---|---|---|
| Primary | 主要操作（每个区域最多1个） | 实心，品牌色背景，白色文字 |
| Secondary | 次要操作 | 描边，透明背景，品牌色文字 |
| Ghost | 低优先级操作 | 无边框，透明背景，灰色文字 |
| Danger | 危险操作（删除、清空） | 实心，红色背景，白色文字 |
| Link | 文本链接 | 无背景，品牌色文字，下划线 |
| 尺寸 | 高度 | 内边距 | 字号 | 圆角 | 最小宽度 |
|---|---|---|---|---|---|
| sm | 32px | 12px 16px | 14px | 6px | 64px |
| md | 40px | 12px 20px | 16px | 8px | 80px |
| lg | 48px | 16px 24px | 16px | 8px | 96px |
| 状态 | Primary 背景 | Primary 文字 | 边框 | 其他 |
|---|---|---|---|---|
| 默认 | Primary | White | - | - |
| 悬停 | Primary-hover | White | - | cursor: pointer |
| 按下 | Primary-active | White | - | transform: scale(0.98) |
| 聚焦 | Primary | White | 2px Primary 外发光 | outline |
| 禁用 | Gray-200 |
Gray-400 |
| - |
| cursor: not-allowed, opacity: 0.6 |
| 加载 | Primary | - | - | 显示 spinner，文字隐藏 |
| 属性 | 值 |
|---|---|
| 尺寸 | 32px / 40px / 48px（正方形） |
| 图标大小 | 16px / 20px / 24px |
| 圆角 | radius-md 或 radius-full（圆形） |
// 主按钮
<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 />} />
| 尺寸 | 高度 | 内边距 | 字号 | 圆角 |
|---|---|---|---|---|
| sm | 32px | 8px 12px | 14px | 6px |
| md | 40px | 10px 14px | 16px | 8px |
| lg | 48px | 12px 16px | 16px | 8px |
| 状态 | 边框颜色 | 背景色 | 其他 |
|---|---|---|---|
| 默认 | Gray-300 | White | - |
| 悬停 | Gray-400 | White | - |
| 聚焦 | Primary | White | 2px Primary 外发光 |
| 错误 | Error | White | 显示错误提示 |
| 禁用 | Gray-200 | Gray-50 | cursor: not-allowed |
| 只读 | Gray-200 | Gray-50 | - |
┌─────────────────────────────────────────┐
│ [图标] [输入内容] [清除按钮] │
└─────────────────────────────────────────┘
前缀 输入区域 后缀
| 变体 | 说明 |
|---|---|
| Text | 单行文本输入 |
| Textarea | 多行文本输入 |
| Password | 密码输入（带显示/隐藏切换） |
| Number | 数字输入（带增减按钮） |
| Search | 搜索输入（带搜索图标和清除按钮） |
// 基础输入框
<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="搜索..." />
与Input保持一致（sm / md / lg）
与Input保持一致
| 属性 | 值 |
|---|---|
| 最大高度 | 256px（超出滚动） |
| 背景 | White |
| 阴影 | shadow-lg |
| 圆角 | radius-md |
| 选项高度 | 40px |
| 选项内边距 | 10px 14px |
| 状态 | 背景色 | 文字颜色 |
|---|---|---|
| 默认 | White | Gray-700 |
| 悬停 | Gray-50 | Gray-900 |
| 选中 | Primary-light | Primary |
| 禁用 | White | Gray-400 |
| 尺寸 | 大小 | 勾选图标 |
|---|---|---|
| sm | 16px | 12px |
| md | 20px | 14px |
| lg | 24px | 16px |
| 状态 | 边框 | 背景 | 勾选图标 |
|---|---|---|---|
| 未选中 | Gray-300 | White | - |
| 选中 | Primary | Primary | White |
| 半选中 | Primary | Primary | White（横线） |
| 禁用-未选中 | Gray-200 | Gray-50 | - |
| 禁用-选中 | Gray-300 | Gray-300 | White |
与Checkbox保持一致
| 状态 | 边框 | 背景 | 内圆 |
|---|---|---|---|
| 未选中 | Gray-300 | White | - |
| 选中 | Primary | White | Primary（8px圆点） |
| 禁用-未选中 | Gray-200 | Gray-50 | - |
| 禁用-选中 | Gray-300 | Gray-50 | Gray-300 |
| 尺寸 | 宽度 | 高度 | 圆点大小 |
|---|---|---|---|
| sm | 32px | 18px | 14px |
| md | 44px | 24px | 20px |
| lg | 56px | 30px | 26px |
| 状态 | 背景 | 圆点位置 |
|---|---|---|
| 关闭 | Gray-300 | 左侧 |
| 开启 | Primary | 右侧 |
| 禁用-关闭 | Gray-200 | 左侧 |
| 禁用-开启 | Primary（opacity: 0.5） | 右侧 |
| 属性 | 值 |
|---|---|
| 背景 | White |
| 圆角 | radius-lg (12px) |
| 阴影 | shadow-md |
| 内边距 | space-6 (24px) |
| 边框 | 可选，1px Gray-200 |
| 变体 | 特征 | 用途 |
|---|---|---|
| 默认 | 阴影 | 普通内容卡片 |
| 描边 | 1px Gray-200 边框，无阴影 | 表单区域 |
| 可点击 | hover 时阴影加深，cursor: pointer | 列表项、导航卡片 |
| 可选中 | 选中时边框变为 Primary | 选择卡片 |
┌─────────────────────────────────────┐
│ [图片/图标] │
│ │
│ 标题 │
│ 描述文字 │
│ │
│ [操作按钮] │
└─────────────────────────────────────┘
| 尺寸 | 高度 | 内边距 | 字号 |
|---|---|---|---|
| sm | 20px | 4px 8px | 12px |
| md | 24px | 6px 10px | 14px |
| lg | 28px | 8px 12px | 14px |
| 变体 | 背景 | 文字 | 边框 |
|---|---|---|---|
| 默认 | Gray-100 | Gray-700 | - |
| Primary | Primary-light | Primary | - |
| Success | Success-light | Success | - |
| Warning | Warning-light | Warning | - |
| Error | Error-light | Error | - |
| 描边 | White | Gray-700 | 1px Gray-300 |
| 尺寸 | 大小 | 字号 |
|---|---|---|
| sm | 16px | 10px |
| md | 20px | 12px |
| lg | 24px | 14px |
| 变体 | 背景 | 文字 |
|---|---|---|
| Primary | Primary | White |
| Success | Success | White |
| Warning | Warning | White |
| Error | Error | White |
| 圆点 | 纯色圆点，无文字 | - |
| 属性 | 值 |
|---|---|
| 背景 | Gray-900 |
| 文字 | White |
| 字号 | 14px |
| 内边距 | 6px 12px |
| 圆角 | radius-md |
| 最大宽度 | 320px |
| 箭头大小 | 6px |
在UI设计文档中，应包含以下组件规范章节：
## 5. 组件规范
### 5.1 按钮 (Button)
[变体、尺寸、状态表格 + 代码示例]
### 5.2 输入框 (Input)
[尺寸、状态、变体表格 + 代码示例]
### 5.3 [其他组件...]
[根据具体需求补充]
❌ 状态不全：只设计默认状态，忽略悬停、禁用等 ❌ 尺寸不统一：不同组件的尺寸不对齐 ❌ 缺少文档：只有视觉稿，没有规范说明 ❌ 不考虑边界：没有考虑长文本、空状态等边界情况