OpenDesign Skills 完全指南：一站式 AI 编码工具知识库
OpenDesign Skills 完全指南：一站式 AI 编码工具知识库
【免费下载链接】opendesign-skillsThe repository of OpenDesign Skills项目地址: https://gitcode.com/openeuler/opendesign-skills
前往项目官网免费下载：https://ar.openeuler.org/ar/
OpenDesign Skills 是 openEuler 生态中为 AI 编码工具打造的终极知识库，它提供了从设计到代码的完整解决方案。无论你是开发者还是设计师，这个知识库都能帮助你快速掌握 OpenDesign 组件库、构建工具、设计令牌和前端开发规范。本指南将为你详细介绍如何利用这个一站式资源提升开发效率！
🚀 什么是 OpenDesign Skills？
OpenDesign Skills 是一个专门为 AI 编码工具优化的知识库集合，包含 5 大核心技能模块：
- 组件库技能- 46 个 Vue 3 UI 组件的完整参考
- 脚本工具技能- 5 个 CLI 构建命令的详细指南
- 设计令牌技能- 6 套主题的 CSS 变量体系
- 设计规范技能- Pixso 设计稿生产指南
- 代码直出技能- 从设计意图直接生成合规代码
通过 skills.sh CLI 工具，你可以一键安装这些技能到你的 AI 编码工具中：
# 安装全部技能（推荐） pnpx skills add git@atomgit.com:openeuler/opendesign-skills.git --all # 安装单个技能 pnpx skills add git@atomgit.com:openeuler/opendesign-skills.git --skill opendesign-components📊 OpenDesign Skills 核心模块详解
1. OpenDesign 组件库技能
位置：skills/opendesign-components/
这是最核心的技能模块，覆盖了 OpenDesign 的全部 46 个 Vue 3 UI 组件。每个组件都有详细的文档，包括：
- 组件 API：完整的 props、events、slots、expose 说明
- 代码示例：可直接复用的 Vue 代码片段
- 最佳实践：组件使用的最佳方式和注意事项
- 响应式行为：在不同屏幕尺寸下的表现
适用场景：
- 使用 OpenDesign 组件搭建 Vue 页面
- 查找组件 API 和使用方法
- 通过 Pixso MCP 从设计稿自动识别组件并生成代码
核心组件示例：
- 基础组件：OButton、OInput、OCard、OIcon
- 表单组件：OForm、OCheckbox、ORadio、OSelect
- 数据展示：OTable、OPagination、ODataTable
- 反馈组件：ODialog、OMessage、OLoading、OToast
每个组件文档都位于skills/opendesign-components/references/目录下，例如 button.md 包含了按钮组件的完整指南。
2. OpenDesign 脚本工具技能
位置：skills/opendesign-scripts/
这个模块提供了 5 个 CLI 构建命令的详细指南，帮助你在项目中正确配置和执行构建流程：
| 命令 | 用途 | 适用项目 |
|---|---|---|
gen:icon | 从 SVG 文件生成 Vue 图标组件 | 组件库 + 业务项目 |
clean:svg | 清理和优化 SVG 文件 | 组件库 + 业务项目 |
build:component | 构建 Vue 组件库（ESM/CJS/UMD） | 仅组件库开发 |
build:style | 编译 SCSS 样式为 CSS | 仅组件库开发 |
gen:token | 从 JSON 生成设计令牌 CSS 变量 | 仅令牌包构建 |
标准构建流程：clean:svg → gen:icon → build:component → build:style
3. OpenDesign 设计令牌技能
位置：skills/opendesign-tokens/
设计令牌是 OpenDesign 的核心设计系统，包含 6 套完整的主题体系：
基础 Token（调色板） → 语义 Token（颜色意义） → 组件级 Token --o-kleinblue-6 → --o-color-primary1 → --btn-color六套主题覆盖：
- openEuler 主题（
e）- Klein Blue 品牌色 - Ascend 主题（
a）- Ascend 品牌色 - Kunpeng 主题（
k）- Kunpeng 品牌色 - MindSpore 主题（
m）- MindSpore 品牌色 - openGauss 主题（
g）- openGauss 品牌色 - openUBMC 主题（
u）- openUBMC 品牌色
使用方式：
// 引入主题 token import '@opensig/opendesign-token/themes/e.token.css' // 运行时切换主题 document.documentElement.setAttribute('data-o-theme', 'e.light') // 浅色模式 document.documentElement.setAttribute('data-o-theme', 'e.dark') // 深色模式4. OpenDesign 设计规范技能
位置：skills/opendesign-design/
这个技能模块专门为 Pixso 设计工具打造，帮助设计师在 Pixso 中生产符合 OpenDesign 规范的设计稿：
覆盖范围：
- 21 个组件设计规范：按钮、输入框、卡片、导航等
- 536 个 UI 组件变体的
componentKey索引 - 187 个图标的
componentKey索引
特色功能：
- 通过 Pixso MCP 调用 OpenDesign Symbol 组件库
- 实时拉取最新的栅格和 token 数据
- 两阶段生成策略：
code_to_design+create_instance
数据来源（运行时实时获取）：
- 栅格规范：
https://raw.atomgit.com/openeuler/opendesign-token/raw/master/packages/opendesign-token/tokens/grid-token.json - 响应式断点：
https://raw.atomgit.com/openeuler/opendesign-token/raw/master/packages/opendesign-token/tokens/responsive-token.json - openEuler 主题 Token：
https://raw.atomgit.com/openeuler/opendesign-token/raw/master/packages/opendesign-token/tokens/openeuler-token.json
5. OpenDesign 代码直出技能
位置：skills/opendesign-codegen/
这是最智能的技能模块！面向设计师和开发者，让 AI 工具能够从设计意图直接生成符合工程规范的 Vue 3 + OpenDesign 代码：
四大约束体系：
- 视觉 Token 约束- 所有样式必须使用
--o-前缀的 CSS 变量 - 组件用法约束- 必须使用真实的 OpenDesign 组件
- 布局与响应式约束- 支持多断点适配
- 工程落地约束- 符合 Vue 3 + TypeScript + BEM 规范
核心产出：
- 合规 Vue SFC 起手模板：starter-page.vue
- 设计意图 → 组件选用速查：component-cheatsheet.md
- 生成后自检清单：checklist.md
- 完整示例：examples/feature-section.vue
🔄 OpenDesign Skills 工作流程
开发侧工作流（业务项目）
- 安装依赖：
pnpm add @opensig/opendesign @opensig/opendesign-token - 选择主题：引入对应的 token CSS 文件
- 使用组件：参考组件技能文档搭建页面
- 自定义图标：使用
gen:icon命令生成图标组件
设计侧工作流（Pixso 设计）
- 打开 Pixso：启用 Pixso MCP 功能
- 生成结构：使用
code_to_design创建页面框架 - 添加组件：使用
create_instance实例化 OpenDesign 组件 - 应用规范：自动应用栅格、颜色、间距等设计规范
📈 OpenDesign Skills 统计概览
| 技能类别 | 数量 | 说明 |
|---|---|---|
| Skill 大类 | 5 | 组件、脚本、令牌、设计、代码直出 |
| 组件 Skill | 46 | 覆盖所有 Vue 3 UI 组件 |
| 脚本 Skill | 5 | CLI 构建命令完整指南 |
| Token 参考 | 7 | 6 套主题 + 通用 token |
| 设计规范 | 21 | Pixso 组件设计指南 |
| 组件变体 | 536 | componentKey 索引 |
| 图标索引 | 187 | 图标 componentKey 索引 |
| 参考文件总计 | 87 | 完整的知识库文档 |
💡 OpenDesign Skills 最佳实践
1. 按需安装技能
不要一次性安装所有技能，根据你的具体需求选择：
# 如果你是开发者，主要写 Vue 代码 pnpx skills add git@atomgit.com:openeuler/opendesign-skills.git --skill opendesign-components pnpx skills add git@atomgit.com:openeuler/opendesign-skills.git --skill opendesign-tokens # 如果你是设计师，主要在 Pixso 工作 pnpx skills add git@atomgit.com:openeuler/opendesign-skills.git --skill opendesign-design2. 利用代码直出技能
对于常见的设计需求，直接使用代码直出技能可以大幅提升效率：
- 楼层展示区：使用 feature-section.vue 模板
- 列表筛选页：参考 list-filter-page.vue 示例
- 表单页面：结合 OForm 组件和设计令牌快速构建
3. 保持技能更新
OpenDesign Skills 会持续更新，建议定期拉取最新版本：
# 更新所有技能 pnpx skills update git@atomgit.com:openeuler/opendesign-skills.git --all # 查看技能状态 pnpx skills list🎯 OpenDesign Skills 核心价值
提升开发效率
通过 AI 编码工具集成 OpenDesign Skills，你可以：
- 快速查找组件 API 和使用方法
- 自动生成符合规范的代码
- 减少手动查阅文档的时间
保证代码质量
所有技能都遵循 OpenDesign 的最佳实践：
- 统一的组件命名规范（O 前缀）
- 一致的响应式断点体系
- 标准的设计令牌使用方式
- 符合工程规范的代码结构
促进设计开发协作
OpenDesign Skills 打通了设计和开发的工作流：
- 设计师在 Pixso 中创建的设计稿可以直接转换为代码
- 开发人员生成的代码符合设计规范
- 设计令牌保证了视觉一致性
支持多社区主题
一套代码，六套主题：
- openEuler、Ascend、Kunpeng、MindSpore、openGauss、openUBMC
- 每个项目初始化时选定一套主题
- 运行时只在浅色/深色模式间切换
📚 学习资源与进阶指南
官方文档结构
OpenDesign Skills 采用三层文档结构：
| 层级 | 名称 | 受众 | 典型文件 |
|---|---|---|---|
| 第一层 | 生产指导 | AI 编码工具（写作者） | AGENTS.md、SKILL-GEN-GUIDE.md |
| 第二层 | 共享约定 | Skill 调用者（跨 Skill 公共上下文） | skills/*/SKILL.md |
| 第三层 | Skill 本体 | Skill 调用者（AI 工具 / 开发者） | skills/*/references/{name}.md |
快速入门路径
新手开发者：
- 阅读 AGENTS.md 了解整体架构
- 安装
opendesign-components和opendesign-tokens技能 - 从 button.md 开始学习基础组件
- 实践 starter-page.vue 模板
设计师：
- 安装
opendesign-design技能 - 学习 Pixso MCP 调用流程
- 掌握两阶段生成策略
- 实践组件实例化和设计规范应用
常见问题解答
Q: 如何判断某个 prop 是否必填？A: 检查组件 types.ts 中的定义：无默认值 + 非可选（非?）= 必填；有默认值或可选（?）= 可选。
Q: 多个相关组件如何处理？A: 如果有多个相关的子组件（如 OFormItem 是 OForm 的子组件），在主组件的 Skill 中作为独立小节输出，不单独创建文件。
Q: 如何更新技能？A: 使用pnpx skills update命令，或重新安装最新版本。
🌟 开始使用 OpenDesign Skills
现在你已经了解了 OpenDesign Skills 的完整功能，是时候开始使用了！无论你是：
- 前端开发者：需要快速构建 Vue 3 应用
- UI/UX 设计师：需要在 Pixso 中创建符合规范的设计稿
- 全栈工程师：希望提升开发效率和代码质量
- 团队负责人：想要统一团队的技术栈和设计规范
OpenDesign Skills 都能为你提供强大的支持。立即安装并体验这个一站式 AI 编码工具知识库带来的效率提升吧！
# 一键安装所有技能 pnpx skills add git@atomgit.com:openeuler/opendesign-skills.git --all # 开始你的 OpenDesign 之旅！记住：好的工具加上好的知识库，能让你的开发工作事半功倍。OpenDesign Skills 就是那个能让你事半功倍的秘密武器！🚀
【免费下载链接】opendesign-skillsThe repository of OpenDesign Skills项目地址: https://gitcode.com/openeuler/opendesign-skills
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考