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 清理和图标组件生成的流程。命令执行顺序建议首先使用convert_to_token脚本将设计工具导出的令牌转换为标准 JSON 格式运行gen:token生成 CSS 变量文件使用clean:svg优化原始 SVG 图标文件最后执行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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考