用途:解决如何把 OpenDesign 设计系统正确集成进工程项目的问题,面向新建项目或改造现有项目采用 OpenDesign 的开发者,覆盖脚手架、主题系统集成、全局样式基础设施、目录组织、编码约定与 code review 检视。
主要能力:提供两套可直接 clone 运行的脚手架——templates/nuxt(Nuxt 4 SSR,适用官网、内容站、需 SEO 场景)与 templates/vue-spa(Vite + Vue 3 SPA,适用后台管理、工具站、不需 SSR 的应用)。两套脚手架均已完成 OpenDesign 主题初始化、Pinia 主题 store、SCSS mixin 全局注入、响应式栅格容器、AppSection 楼层组件与全 token 驱动样式,根目录含 AGENTS.md 提供架构约束与最佳实践指导。
使用方式:选定社区主题(e / a / k / m / g / u),clone 对应脚手架作为起点,把 OPENDESIGN_COMMUNITY 常量与 token CSS 引入换成所选社区,再按需读取 references 完成定制。参考文件包括 getting-started.md(依赖安装、入口文件、样式引入顺序、initRound、useScreen())、theme-system.md(Pinia store、SSR hydration、VueUse、社区切换、ThemeToggle)、styles-infrastructure.md、project-layout.md、conventions.md。
限制与红线:样式引入顺序不可调换(Token CSS → 鸿蒙字体 → 组件库样式 → 项目全局样式);禁止用 :deep() 修改组件内部样式;颜色、间距、字号一律用 var(--o-),语义色用 --o-color-,禁止硬编码 hex / px;优先使用 OpenDesign 组件;主题由 <html data-o-theme="社区.模式"> 驱动,业务代码走 Pinia store 的 isDark 或 setMode。本 skill 只讲工程化集成,组件 Props、token 变量名、设计稿规范、codegen、CLI 命令分别见同级 skill。