opendesign-components
OpenDesign 组件库使用指南
OpenDesign 是一个面向 openEuler 生态的 Vue 3 组件库，提供 59 个可复用 UI 组件。组件库有六套独立主题，每个社区项目在初始化时选定一套，运行时只切换 dark/light 模式。
安装
1. 安装依赖包
pnpm add @opensig/opendesign @opensig/opendesign-token
# 或
npm install @opensig/opendesign @opensig/opendesign-token
@opensig/opendesign— 组件库@opensig/opendesign-token— 设计 token（必需），包含主题 CSS 变量
2. 选择主题并引入样式
More from finch-poi/opendesign-skills
opendesign-tokens
OpenDesign 设计 Token 指南。当需要使用 @opensig/opendesign-token 包中的 CSS 变量时使用此 skill。包含六套主题（openEuler/Ascend/Kunpeng/Mindspore/openGauss/openUBMC）的完整 token 体系，支持颜色、间距、圆角、字体、阴影、响应式排版、栅格系统等所有设计令牌。使用场景：(1) 查找颜色值对应的语义 token，(2) 获取间距/圆角/字体的 token 名称，(3) 了解六套主题的差异，(4) 代码中使用 CSS 变量替代硬编码值，(5) 使用响应式 token 实现多断点适配
19opendesign-scripts
OpenDesign 构建脚本工具使用指南。当需要使用 @opensig/open-scripts CLI 工具进行图标生成、SVG 清理、组件构建、样式编译、设计令牌生成时使用此 skill。支持 5 个命令：gen:icon（SVG 转 Vue 图标组件）、clean:svg（SVG 清理优化）、build:component（Vue 组件库构建）、build:style（SCSS 样式编译）、gen:token（设计令牌 CSS 变量生成）。使用场景：(1) 配置和执行构建脚本，(2) 编写图标/令牌配置文件，(3) 了解构建流程和命令用法
17openeuler-frontend-tools
openEuler Portal 前端开发工具和规范集合。当需要使用项目中的通用 composables、SCSS mixins 或工具函数时使用此 skill。使用场景：(1) 需要使用响应式屏幕适配功能时查找 useScreen composable，(2) 需要使用响应式字体 mixin 时查找 font.scss，(3) 需要使用 URL 参数、Cookie 等工具函数时查找 utils/common.ts，(4) 需要使用国际化、剪贴板、防抖搜索等 composables 时查找对应的工具
17