# design_system_query_skill

**Repository Path**: code-power_1/design_system_query_skill

## Basic Information

- **Project Name**: design_system_query_skill
- **Description**: 让 AI 编程助手能够根据设计师的提问，自动查询并引用主流设计规范文档，给出准确、一致的设计建议。
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-06-07
- **Last Updated**: 2026-06-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: skill, Frontend

## README

# Design System Query Skill

让 AI 编程助手能够根据设计师的提问，自动查询并引用主流设计规范文档，给出准确、一致的设计建议。

## 功能特点

- **多规范支持**：支持 Material Design、Apple HIG、Fluent、Ant Design、Carbon、Atlassian、Salesforce Lightning 等 7 个主流设计系统
- **智能匹配**：根据用户问题中的关键词自动识别并引用对应的设计规范
- **标准输出**：提供结构化的设计建议，包含具体参数、使用建议和参考来源
- **跨平台兼容**：支持 SOLO、Trae、Codex、Claude Code、Cursor 等多个 AI 工具平台
- **对比分析**：支持跨规范对比查询，帮助设计师选择最适合的方案

## 支持的设计规范

| 规范名称 | 适用场景 | 发布方 |
|----------|----------|--------|
| Material Design | Android、Web、Flutter、跨平台 | Google |
| Apple Human Interface Guidelines | iOS、iPadOS、macOS、visionOS | Apple |
| Fluent Design System | Windows、Web、跨平台 | Microsoft |
| Ant Design | B端中后台、Web、移动端 | 阿里巴巴 |
| Carbon Design System | 企业级产品、数据平台 | IBM |
| Atlassian Design System | 协作工具、团队产品 | Atlassian |
| Salesforce Lightning Design System | CRM、销售工具 | Salesforce |

## 项目结构

```
design_system_query_skill/
├── skill.md                    # Skill 配置文件（核心逻辑）
├── skill.yaml                  # Skill YAML 配置文件
├── README.md                   # 项目说明（本文件）
├── design_system/
│   ├── Material_Design.md          # Material Design 规范文档
│   ├── Apple_Human_Interface_Guidelines.md  # Apple HIG 规范文档
│   ├── Fluent_Design_System.md     # Fluent Design 规范文档
│   ├── Ant_Design.md               # Ant Design 规范文档
│   ├── Carbon_Design_System.md     # Carbon Design 规范文档
│   ├── Atlassian_Design_System.md  # Atlassian Design 规范文档
│   └── Salesforce_Lightning_Design_System.md  # Salesforce Lightning 规范文档
└── template/
    └── 设计规范与设计指南文档模板.md  # 规范文档模板
```

## 安装与配置

### SOLO 平台

在 `solo.json` 或 `.soloskill` 中配置：

```json
{
  "skills": [
    {
      "name": "design-system-query",
      "entry": "design_system_query_skill/skill.md",
      "context": ["design_system_query_skill/design_system/*.md"],
      "trigger": ["设计规范", "组件", "颜色", "字体", "间距", "按钮", "卡片", "表格", "动效", "无障碍"]
    }
  ]
}
```

### Trae 平台

在 `.trae/rules/design-system.md` 中配置：

```markdown
# Design System Rules

## Context
- @design_system_query_skill/skill.md
- @design_system_query_skill/design_system/Material_Design.md
- @design_system_query_skill/design_system/Apple_Human_Interface_Guidelines.md
- @design_system_query_skill/design_system/Fluent_Design_System.md
- @design_system_query_skill/design_system/Ant_Design.md
- @design_system_query_skill/design_system/Carbon_Design_System.md
- @design_system_query_skill/design_system/Atlassian_Design_System.md
- @design_system_query_skill/design_system/Salesforce_Lightning_Design_System.md

## Rules
- 当用户询问设计参数时，优先查询上述规范文件
- 回答时必须引用具体规范名称和章节
- 如涉及多个规范，提供对比分析
```

### Codex / Claude Code / Cursor

将 `design_system_query_skill/` 文件夹放入项目根目录，并在对应配置文件中引用所有 `.md` 文件。

## 使用示例

### 示例 1：查询按钮规范

**用户提问**: "iOS App 的按钮应该做多大？"

**AI 回答**:

```markdown
## 设计建议

### 引用规范
> 基于 **Apple Human Interface Guidelines** 的设计规范

### 具体参数

| 尺寸 | 高度 | 水平内边距 |
|------|------|------------|
| 大 | 50pt | 20pt |
| 中 | 44pt | 16pt |
| 小 | 32pt | 12pt |

### 使用建议
- iOS 默认按钮推荐使用**中尺寸（44pt）**，这是 Apple 推荐的最小触控区域
- 重要操作可使用**大尺寸（50pt）**
- 辅助操作可使用**小尺寸（32pt）**
- 可点击图标最小触控区域：**44×44pt**

### 参考来源
- design_system/Apple_Human_Interface_Guidelines.md
```

### 示例 2：跨规范对比

**用户提问**: "Material Design 和 Ant Design 的按钮有什么区别？"

**AI 回答**:

```markdown
## 设计对比

### Material Design 按钮

| 尺寸 | 高度 | 水平内边距 |
|------|------|------------|
| 大 | 48dp | 24dp |
| 中 | 40dp | 16dp |
| 小 | 32dp | 12dp |

### Ant Design 按钮

| 尺寸 | 高度 | 水平内边距 |
|------|------|------------|
| 大 | 48px | 24px |
| 中 | 36px | 20px |
| 小 | 28px | 12px |

### 主要区别

| 维度 | Material Design | Ant Design |
|------|-----------------|------------|
| 尺寸单位 | dp | px |
| 中尺寸高度 | 40dp | 36px |
| 适用场景 | 移动端优先 | B端中后台优先 |

### 参考来源
- design_system/Material_Design.md
- design_system/Ant_Design.md
```

## 支持的查询类型

### 设计参数查询
- 颜色、色值、主色、配色
- 字体、字号、行高、字重
- 间距、边距、留白
- 阴影、圆角、层级
- 组件尺寸（按钮、输入框、卡片等）

### 设计规范选择
- 平台推荐（iOS、Android、Web、Windows）
- 场景推荐（B端、C端、企业级、协作工具）

### 组件设计咨询
- 按钮类型和状态
- 输入框样式
- 弹窗尺寸
- 表格规范
- 导航组件

### 设计原则咨询
- 无障碍设计（WCAG）
- 动效时长
- 文案规范
- 交互模式

## 扩展指南

### 添加新设计规范

1. 按照现有模板创建新的 `.md` 文件
2. 在 `skill.md` 的「可用设计规范文档」表格中添加一行
3. 在 `skill.yaml` 的 `context` 中添加文件路径
4. 在「规范选择策略」中添加对应的判断规则
5. 更新各 AI 工具的配置文件

### 自定义团队规范

1. 复制最接近的规范文件（如 `Ant_Design.md`）
2. 修改文件名为团队名称（如 `MyTeam_Design.md`）
3. 更新其中的参数为团队标准
4. 在 `skill.md` 和 `skill.yaml` 中添加引用

## 注意事项

1. **优先引用具体数值**：回答时应给出具体的色值、尺寸、Token 名称
2. **标明规范来源**：每次回答必须标明引用的设计规范
3. **区分平台单位**：注意 dp（Android）、pt（iOS）、px（Web）的区别
4. **考虑上下文**：如用户未指定平台，先询问或给出通用建议
5. **保持更新**：定期检查官方规范更新并同步文档

## 参考资源

- [Material Design 3](https://m3.material.io)
- [Apple Human Interface Guidelines](https://developer.apple.com/design/human-interface-guidelines)
- [Fluent Design System](https://fluent2.microsoft.design)
- [Ant Design](https://ant.design)
- [Carbon Design System](https://carbondesignsystem.com)
- [Atlassian Design](https://atlassian.design)
- [Salesforce Lightning](https://www.lightningdesignsystem.com)
- [WCAG 2.1](https://www.w3.org/WAI/WCAG21/quickref/)

## 更新日志

| 版本 | 日期 | 更新内容 |
|------|------|----------|
| v1.0 | 2026-06-07 | 初始版本，支持 7 个主流设计规范 |

---

**维护说明**：建议每季度检查一次各设计规范的官方更新，并同步到对应的 `.md` 文件中。