Menú
De forma predeterminada está seleccionado el prompt que primero revisa el origen. Puedes cambiar a un comando directo o descargar una copia local.
Lee SKILL.md y los archivos complementarios que muestra SkillsMP antes de decidir si quieres instalarlo.
Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.
Un comando directo omite el prompt de revisión. Revisa el origen antes de ejecutarlo.
npx skills add https://github.com/echoVic/boss-skill --skill ui-designer-component-specificationEl comando permanece en una sola línea. Desplázate horizontalmente para revisarlo antes de copiarlo.
¿Prefieres una copia local? Descarga los archivos que SkillsMP tiene disponibles ahora.
可审计的 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测试的编写方法和最佳实践
Basado en la clasificación ocupacional SOC
Mostrando SKILL.md
| 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 [其他组件...]
[根据具体需求补充]
❌ 状态不全：只设计默认状态，忽略悬停、禁用等 ❌ 尺寸不统一：不同组件的尺寸不对齐 ❌ 缺少文档：只有视觉稿，没有规范说明 ❌ 不考虑边界：没有考虑长文本、空状态等边界情况