OpenDesign Skills 社区适配支持 6 大开源社区的秘诀【免费下载链接】opendesign-skillsThe repository of OpenDesign Skills项目地址: https://gitcode.com/openeuler/opendesign-skills前往项目官网免费下载https://ar.openeuler.org/ar/OpenDesign Skills 是一个专为 AI 编码工具设计的技能库提供了一套完整的解决方案帮助开发者快速适配 openEuler、Ascend、Kunpeng、MindSpore、openGauss 和 openUBMC 这 6 大开源社区的前端开发需求。通过智能化的设计令牌体系和组件库让跨社区 UI 开发变得简单高效。六大社区主题的智能适配OpenDesign Skills 最强大的功能之一就是为每个开源社区提供专属的主题系统。每个社区都有自己独特的品牌色和设计风格社区主题标识品牌色设计特点openEulereKlein Blue克莱因蓝圆角极小主色/链接/控件悬浮均使用品牌蓝色AscendaAscend Red圆角较大8~24px主色使用深灰色品牌红用于装饰/强调KunpengkKunpeng 品牌色圆角适中主色使用品牌色控件悬浮为品牌色浅调MindSporemMindSpore 品牌色圆角适中主色使用品牌色控件悬浮为品牌色浅调openGaussgopenGauss 品牌色圆角适中主色使用品牌色控件悬浮为品牌色浅调openUBMCuopenUBMC 品牌色圆角适中主色使用品牌色控件悬浮为品牌色浅调四层技能体系架构OpenDesign Skills 通过四层技能体系为不同角色的用户提供精准支持1. 组件开发技能opendesign-components覆盖 46 个 Vue 3 UI 组件包括 OButton、OInput、OCard、OTable 等常用组件。每个组件都有详细的 API 文档、设计理解卡和代码示例帮助开发者快速上手。2. 设计令牌技能opendesign-tokens提供完整的 CSS 变量体系包含 6 套主题的语义化设计令牌。通过--o-前缀的 CSS 变量确保样式的一致性和主题切换的便捷性。3. 设计稿生产技能opendesign-design专为设计师设计支持在 Pixso 中创建符合 OpenDesign 规范的组件。包含 536 个 UI 组件变体和 187 个图标的 componentKey 索引。4. 代码直出技能opendesign-codegen让 AI 工具能够直接将设计意图转换为符合工程规范的 Vue 3 OpenDesign 代码实现设计到代码的无缝衔接。智能适配的工作流程主题选择与配置每个社区项目在初始化时选定一套主题代码中无需关心具体主题切换// 只需引入对应主题的 CSS 文件 import opensig/opendesign-token/themes/e.token.css // openEuler 主题 import opensig/opendesign-token/themes/a.token.css // Ascend 主题运行时切换浅色/深色模式document.documentElement.setAttribute(data-o-theme, e.light) // 浅色模式 document.documentElement.setAttribute(data-o-theme, e.dark) // 深色模式设计令牌的智能应用OpenDesign Skills 采用三层令牌体系基础令牌调色板颜色如--o-blue-1到--o-blue-10语义令牌颜色意义如--o-color-primary1组件级令牌具体组件样式如--btn-color这种设计确保了样式的语义化和可维护性同时支持跨社区的主题适配。响应式设计的统一处理OpenDesign Skills 提供了统一的响应式断点系统Phone≤840pxPad841-1200pxLaptop1201-1680pxDesktop1680px通过响应式令牌如--o-r-font_size-*、--o-r-gap-*实现自动适配无需编写复杂的媒体查询。实际应用场景场景一为 openEuler 社区开发新功能安装 OpenDesign Skills 技能包选择 openEuler 主题主题标识e使用 OButton、OInput 等组件构建界面应用--o-color-primary1等语义令牌生成的代码自动适配 openEuler 的 Klein Blue 品牌色场景二为 Ascend 社区创建管理后台切换至 Ascend 主题主题标识a使用 OCard、OTable、OPagination 等组件应用 Ascend 特有的圆角设计8-24px使用深灰色作为主色品牌红作为强调色场景三多社区组件库维护使用统一的组件 API通过主题系统自动适配各社区样式利用设计令牌确保样式一致性支持一键主题切换测试最佳实践指南1. 始终使用语义令牌❌ 错误做法color: var(--o-grey-14)✅ 正确做法color: var(--o-color-info1)2. 优先使用 OpenDesign 组件❌ 错误做法使用原生button或div模拟按钮 ✅ 正确做法使用OButton组件3. 遵循 BEM 命名规范所有自定义样式都使用 BEM 命名法确保样式隔离和可维护性。4. 支持国际化所有面向用户的文案都通过 i18n 系统管理支持多语言切换。安装与使用使用 skills CLI 一键安装# 安装全部技能 pnpx skills add gitatomgit.com:openeuler/opendesign-skills.git --all # 按需安装特定技能 pnpx skills add gitatomgit.com:openeuler/opendesign-skills.git --skill opendesign-components pnpx skills add gitatomgit.com:openeuler/opendesign-skills.git --skill opendesign-tokens总结OpenDesign Skills 通过智能化的主题系统、完整的设计令牌体系和丰富的组件库为 6 大开源社区提供了统一而灵活的前端开发解决方案。无论是开发者还是设计师都能在这个生态中找到适合自己的工具和资源大大提升了跨社区 UI 开发的效率和质量。通过四层技能体系的协同工作OpenDesign Skills 实现了从设计到代码的完整闭环让开源社区的前端开发变得更加标准化和高效。【免费下载链接】opendesign-skillsThe repository of OpenDesign Skills项目地址: https://gitcode.com/openeuler/opendesign-skills创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考