OpenDesign Skills 构建工具大全：5个 CLI 命令提升开发效率

OpenDesign Skills 构建工具大全：5个 CLI 命令提升开发效率

【免费下载链接】opendesign-skillsThe repository of OpenDesign Skills项目地址: https://gitcode.com/openeuler/opendesign-skills

前往项目官网免费下载：https://ar.openeuler.org/ar/

OpenDesign Skills 是 openEuler 社区推出的设计工具集，提供了一系列强大的 CLI 命令来简化设计资源到代码的转换流程。无论是处理 SVG 图标、优化设计令牌还是自动化组件生成，这些命令都能帮助开发者显著提升工作效率，让设计资源无缝集成到开发流程中。

1.gen:icon— 一键生成 Vue 图标组件 🚀

gen:icon命令是图标处理的核心工具，它能将设计师提供的 SVG 图标文件自动转换为可直接使用的 Vue 单文件组件。该命令支持按图标类型（填充型、描边型、多色型）分类处理，并通过 SVGO 进行优化，生成的组件支持动态颜色控制和 SSR 渲染。

使用方式非常简单，只需在项目中执行：

open-scripts gen:icon [--config 配置文件路径]

默认配置文件为./icon.config.ts，你可以在其中指定 SVG 源文件目录、输出目录、组件前缀等参数。例如：

export default { input: './svgs', output: '../src/icon-components/', componentClass: 'o-svg-icon', prefix: 'o-', };

该命令会扫描input目录下的fill/、stroke/、color/三个子目录，根据 SVG 类型生成对应的 Vue 组件，并在输出目录中创建统一的入口文件和图标清单。详细使用指南可参考 gen-icon.md。

2.clean:svg— 优化 SVG 文件大小 ✨

在使用gen:icon生成图标组件前，建议先用clean:svg命令对原始 SVG 文件进行清理和优化。该命令能移除 SVG 中不必要的元数据、注释和冗余代码，统一格式并优化路径，显著减小文件体积。

使用方法：

open-scripts clean:svg [--config 配置文件路径]

默认配置下，命令会处理./raw-svgs目录中的 SVG 文件，并将优化后的文件输出到./clean-svgs目录。你可以通过配置文件自定义输入输出路径、SVGO 优化规则等参数。

3.gen:token— 生成设计令牌 CSS 变量 🎨

gen:token命令用于将 JSON 格式的设计令牌（Design Token）转换为 CSS 变量，方便在项目中统一使用设计系统定义的颜色、字体、间距等样式属性。

执行命令：

open-scripts gen:token [--config 配置文件路径]

该命令会读取 JSON 格式的设计令牌文件，生成包含 CSS 变量的样式文件。例如，将 tokens.json 中的颜色定义转换为：

:root { --color-primary: #0066cc; --color-secondary: #66ccff; /* ... 其他颜色变量 */ }

设计令牌的定义和使用规范可参考 tokens.md。

4.convert_to_token— 格式转换脚本 🔄

在skills/opendesign-tokens/scripts/目录下，提供了convert_to_token.py脚本，用于将其他格式的设计令牌文件转换为标准的 JSON 格式。这对于从设计工具（如 Figma、Sketch）导出的令牌文件进行格式转换非常有用。

使用 Python 执行脚本：

python skills/opendesign-tokens/scripts/convert_to_token.py [输入文件路径] [输出文件路径]

该脚本支持多种输入格式，能够自动识别并转换为符合 OpenDesign Skills 规范的 JSON 设计令牌文件。

5. 命令集成与最佳实践 📋

为了更高效地使用这些 CLI 命令，建议在项目的package.json中配置脚本：

{ "scripts": { "clean:svg": "open-scripts clean:svg --config ./icons/clean.config.ts", "gen:icon": "open-scripts gen:icon --config ./icons/icon.config.ts", "gen:token": "open-scripts gen:token --config ./tokens/token.config.ts", "prepare:icons": "npm run clean:svg && npm run gen:icon" } }

这样，你可以通过npm run prepare:icons一键完成 SVG 清理和图标组件生成的流程。

命令执行顺序建议

1. 首先使用convert_to_token脚本将设计工具导出的令牌转换为标准 JSON 格式
2. 运行gen:token生成 CSS 变量文件
3. 使用clean:svg优化原始 SVG 图标文件
4. 最后执行gen:icon生成 Vue 图标组件

遵循这个流程，可以确保设计资源从源文件到代码的转换过程高效且规范。

总结

OpenDesign Skills 提供的这些 CLI 命令，为设计资源到代码的转换提供了完整的解决方案。通过gen:icon、clean:svg、gen:token等命令，开发者可以轻松处理图标和设计令牌，减少手动工作，提高开发效率。这些工具不仅适用于组件库开发，也能很好地集成到业务项目中，帮助团队更好地维护设计系统的一致性。

要开始使用这些工具，只需克隆项目仓库：

git clone https://gitcode.com/openeuler/opendesign-skills

然后参考各命令的详细文档，根据项目需求进行配置和使用。通过这些强大的 CLI 工具，让设计资源的管理和使用变得更加简单高效！

【免费下载链接】opendesign-skillsThe repository of OpenDesign Skills项目地址: https://gitcode.com/openeuler/opendesign-skills