OpenDesign Skills 完全指南：一站式 AI 编码工具知识库
发布时间：2026/6/30 0:24:34
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 SkillsOpenDesign Skills 是一个专门为 AI 编码工具优化的知识库集合包含 5 大核心技能模块组件库技能- 46 个 Vue 3 UI 组件的完整参考脚本工具技能- 5 个 CLI 构建命令的详细指南设计令牌技能- 6 套主题的 CSS 变量体系设计规范技能- Pixso 设计稿生产指南代码直出技能- 从设计意图直接生成合规代码通过 skills.sh CLI 工具你可以一键安装这些技能到你的 AI 编码工具中# 安装全部技能推荐 pnpx skills add gitatomgit.com:openeuler/opendesign-skills.git --all # 安装单个技能 pnpx skills add gitatomgit.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:style3. 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_designcreate_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.jsonopenEuler 主题 Tokenhttps://raw.atomgit.com/openeuler/opendesign-token/raw/master/packages/opendesign-token/tokens/openeuler-token.json5. 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组件、脚本、令牌、设计、代码直出组件 Skill46覆盖所有 Vue 3 UI 组件脚本 Skill5CLI 构建命令完整指南Token 参考76 套主题 通用 token设计规范21Pixso 组件设计指南组件变体536componentKey 索引图标索引187图标 componentKey 索引参考文件总计87完整的知识库文档 OpenDesign Skills 最佳实践1. 按需安装技能不要一次性安装所有技能根据你的具体需求选择# 如果你是开发者主要写 Vue 代码 pnpx skills add gitatomgit.com:openeuler/opendesign-skills.git --skill opendesign-components pnpx skills add gitatomgit.com:openeuler/opendesign-skills.git --skill opendesign-tokens # 如果你是设计师主要在 Pixso 工作 pnpx skills add gitatomgit.com:openeuler/opendesign-skills.git --skill opendesign-design2. 利用代码直出技能对于常见的设计需求直接使用代码直出技能可以大幅提升效率楼层展示区使用 feature-section.vue 模板列表筛选页参考 list-filter-page.vue 示例表单页面结合 OForm 组件和设计令牌快速构建3. 保持技能更新OpenDesign Skills 会持续更新建议定期拉取最新版本# 更新所有技能 pnpx skills update gitatomgit.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 gitatomgit.com:openeuler/opendesign-skills.git --all # 开始你的 OpenDesign 之旅记住好的工具加上好的知识库能让你的开发工作事半功倍。OpenDesign Skills 就是那个能让你事半功倍的秘密武器【免费下载链接】opendesign-skillsThe repository of OpenDesign Skills项目地址: https://gitcode.com/openeuler/opendesign-skills创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
)
