OpenDesign Skills 架构解析Skill 分层设计与跨技能协作【免费下载链接】opendesign-skillsThe repository of OpenDesign Skills项目地址: https://gitcode.com/openeuler/opendesign-skills前往项目官网免费下载https://ar.openeuler.org/ar/OpenDesign Skills 是 OpenDesign 生态的 AI Skill 集合为 AI 编码工具提供 OpenDesign 组件库、构建工具、设计令牌和前端开发规范的完整知识。本文将深入解析其分层架构设计与跨技能协作机制帮助开发者快速掌握这套技能体系的核心原理与使用方法。Skill 分层架构设计OpenDesign Skills 采用清晰的分层架构将不同功能的技能模块进行解耦形成了五大核心 Skill 类别每个类别专注于特定领域的能力输出。核心 Skill 分层概览OpenDesign Skills 主要分为以下五个层级每个层级承担不同的功能职责Skill 类别包名覆盖范围核心职责opendesign-componentsopensig/opendesign46 个 Vue 3 UI 组件提供组件 API 与代码示例opendesign-scriptsopensig/open-scripts5 个 CLI 构建命令提供构建流程与工具支持opendesign-tokensopensig/opendesign-token3 套主题的设计令牌体系提供设计变量与主题支持opendesign-designPixso MCP21 个组件设计规范 536 变体 187 图标提供设计稿生产能力opendesign-codegenopensig/opendesignopensig/opendesign-token设计意图直出合规代码提供设计到代码的转换能力数据层opendesign-tokens数据层以 opendesign-tokens 为核心构建了完整的设计令牌体系采用三级 Token 结构基础 Token调色板 → 语义 Token颜色意义 → 组件级 Token --o-kleinblue-6 → --o-color-primary1 → --btn-color该层级支持六套主题openEuler / Ascend / Kunpeng / Mindspore / openGauss / openUBMC为上层提供统一的设计变量支持确保设计与开发的一致性。组件层opendesign-components组件层基于 opendesign-components 实现提供 46 个 Vue 3 UI 组件覆盖从基础元素到复杂交互的完整组件体系。其目录结构清晰每个组件都有独立的技能文件skills/opendesign-components/ ├── SKILL.md # 主 skill 文件含安装指南和组件索引 └── references/ └── {component}.md # 各组件的 skill 文件×46组件层不仅提供组件的 API 文档props / events / slots / expose还包含代码示例和最佳实践支持从 Pixso 设计稿识别并匹配组件的能力。工具层opendesign-scripts工具层通过 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为上层提供自动化构建支持。设计层opendesign-design设计层专注于在 Pixso 中通过 MCP 工具生产符合 OpenDesign 规范的设计稿覆盖 21 个组件设计规范、536 个 UI 组件变体和 187 个图标的 componentKey 索引。其核心能力包括在 Pixso 中创建符合规范的 UI 组件应用栅格、颜色、字号等设计规范调用 OpenDesign 的 Pixso Symbol 组件库读取并应用设计变量到画布元素应用层opendesign-codegen应用层通过 opendesign-codegen 实现设计意图到代码的直接转换面向设计师提供一步生成合规 Vue 3 OpenDesign 代码的能力。其核心产物包括合规 Vue SFC 起手模板设计意图 → OpenDesign 组件选用速查生成后四维度自检清单实际页面示例如带筛选的列表页跨技能协作机制OpenDesign Skills 各层级之间并非孤立存在而是通过精心设计的协作机制形成有机整体实现从设计到开发的全流程支持。技能协作关系图OpenDesign Skills 各模块之间的协作关系如下┌── 设计阶段Pixso 画布 ──┐ ┌────── 开发阶段Vue 代码 ──────┐ │ │ │ │ │ opendesign-design │ │ opendesign-tokens opendesign-scripts │ (Pixso 设计稿生产) │ ──映射──▶│ (CSS 变量) (CLI 构建工具) │ │ │ │ │ └──────────────────────────┘ │ │ 提供主题变量 │ gen:icon / build │ ▼ ▼ │ opendesign-components ◄──┘ │ (46 个 Vue 3 UI 组件) │ │ │ │ 被业务项目使用 │ ▼ │ 业务项目 └────────────────────────────────┘典型协作流程A. 业务项目开发流程开发侧安装opensig/opendesignopensig/opendesign-token选择主题引入 token CSS基于 opendesign-tokens使用组件搭建页面基于 opendesign-components如有自定义图标使用gen:icon命令基于 opendesign-scriptsB. 设计稿生产流程设计侧在 Pixso 中打开工作文件启用 Pixso MCP按 opendesign-design 中的两阶段策略生成页面code_to_design结构 create_instance组件通过 WebFetch 拉取最新 token / 栅格数据并应用到画布技能间数据共享机制各技能之间通过标准化的数据接口实现高效协作opendesign-design 与 opendesign-components 共享组件规范确保设计稿与代码实现一致opendesign-tokens 为所有上层技能提供统一的设计变量通过 URL 实时拉取最新数据opendesign-codegen 复用 opendesign-tokensToken 取值与 opendesign-components组件 API实现设计意图到代码的直接转换实际应用场景OpenDesign Skills 的分层架构与协作机制支持多种实际应用场景满足不同角色的需求。开发人员使用场景组件集成通过 opendesign-components 快速查找组件 API 和代码示例如 Button 组件的使用方法可参考 button.md主题定制利用 opendesign-tokens 实现主题切换如 openEuler 主题可参考 tokens-openeuler.md构建优化使用 opendesign-scripts 提供的 CLI 命令优化开发流程如通过gen:icon命令生成图标组件设计人员使用场景规范遵循参考 opendesign-design 中的组件设计规范创建符合要求的设计稿如卡片组件设计可参考 card.md组件复用通过 componentKey 索引快速调用 OpenDesign 的 Pixso Symbol 组件库设计转代码利用 opendesign-codegen 直接将设计意图转换为合规的 Vue 代码如使用 starter-page.vue 作为起手模板总结OpenDesign Skills 通过清晰的分层架构设计将复杂的设计与开发流程分解为五个核心技能模块每个模块专注于特定领域的能力输出。同时通过精心设计的跨技能协作机制实现了各模块之间的高效协同为开发者和设计师提供了从设计到开发的全流程支持。无论是业务项目开发还是设计稿生产OpenDesign Skills 都能提供标准化、高效率的解决方案帮助团队快速构建符合 OpenDesign 规范的高质量产品。通过掌握这套技能体系开发者和设计师可以显著提升工作效率确保设计与开发的一致性从而加速产品迭代过程。想要开始使用 OpenDesign Skills可以通过以下命令一键安装到你的 AI 编码工具# 安装全部 skill推荐 pnpx skills add gitatomgit.com:openeuler/opendesign-skills.git --all # 安装单个 skill pnpx skills add gitatomgit.com:openeuler/opendesign-skills.git --skill opendesign-components探索 OpenDesign Skills 的分层架构体验高效协作的开发流程让 AI 工具更好地服务于你的项目开发【免费下载链接】opendesign-skillsThe repository of OpenDesign Skills项目地址: https://gitcode.com/openeuler/opendesign-skills创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考