OpenDesign Skills 代码直出指南设计师如何直接生成合规 Vue 代码【免费下载链接】opendesign-skillsThe repository of OpenDesign Skills项目地址: https://gitcode.com/openeuler/opendesign-skills前往项目官网免费下载https://ar.openeuler.org/ar/你是否曾想过设计师的设计意图能直接变成生产级代码无需开发工程师手动转译OpenDesign Skills 代码直出功能让这一愿景成为现实 这是一个革命性的设计到代码转换方案让设计师和AI工具能够直接生成符合工程规范的Vue 3 OpenDesign代码。什么是OpenDesign代码直出OpenDesign代码直出是一种一步到位的代码生成技术。设计师或AI工具基于设计意图直接输出真实可用的Vue单文件组件SFC这些代码使用真实的opensig/opendesign组件库完全遵循OpenDesign设计令牌体系符合BEM命名规范和SCSS作用域支持i18n国际化具备完整的响应式设计核心优势渲染出来就是设计稿无需先出HTML再转代码的中间步骤代码可直接进入生产工程四大约束框架确保代码合规性1️⃣ 视觉Token约束所有视觉样式必须使用OpenDesign语义化Token变量!-- ❌ 错误硬编码颜色 -- div stylecolor: #333; font-size: 16px; !-- ✅ 正确使用语义Token -- div stylecolor: var(--o-color-info1); font-size: var(--o-r-font_size-text1);关键规则颜色必须用--o-color-*语义Token如--o-color-primary1、--o-color-info1严禁直接使用色板变量如--o-kleinblue-6、--o-grey-14页面级字号/行高/间距使用响应式Token--o-r-*前缀2️⃣ 组件用法约束设计意图必须直接映射到OpenDesign真实组件设计意图使用组件避免使用按钮OButtonbutton卡片OCarddiv classcard表格OTabletable下拉选择OSelectOOptionselectoption对话框ODialog手写弹窗3️⃣ 布局与响应式约束页面级布局使用24栅格系统优先使用响应式Token避免硬编码断点多端适配自动完成4️⃣ 工程落地约束使用script setup langts语法Props使用TypeScript泛型定义样式使用scoped SCSSBEM命名嵌套不超过3层面向用户的文案走i18n国际化7步工作流从设计到生产代码第一步确认目标工程在开始前必须确认目标仓库使用OpenDesign组件库。检查目标仓根目录的AGENTS.md文件查看技术栈表中UI组件库是否为opensig/opendesign。第二步读取最新Skill文档根据需求读取相应的Skill文档视觉Token →skills/opendesign-tokens/SKILL.md组件API →skills/opendesign-components/SKILL.mdCLI命令 →skills/opendesign-scripts/SKILL.md设计规范 →skills/opendesign-design/SKILL.md第三步使用起手模板复制skills/opendesign-codegen/references/starter-page.vue作为起点这个模板包含了所有必要的导入、样式和结构。第四步直接编写Vue代码基于设计意图使用真实OpenDesign组件构建页面结构。例如一个功能展示区块template section classfeatures OCard v-forfeature in features :keyfeature.id h3{{ feature.title }}/h3 p{{ feature.description }}/p OTag colorprimary{{ feature.tag }}/OTag /OCard /section /template第五步应用设计Token所有样式使用OpenDesign Token变量.features { display: flex; gap: var(--o-r-grid-column-gutter); h3 { color: var(--o-color-info1); font-size: var(--o-r-font_size-h3); line-height: var(--o-r-line_height-h3); } }第六步四维度自检使用skills/opendesign-codegen/references/checklist.md进行完整检查确保✅ 视觉Token全部合规✅ 组件使用正确✅ 布局响应式正常✅ 工程规范符合要求第七步交付生产代码生成的代码可以直接提交到生产仓库无需二次转换实战示例快速创建功能展示页假设你需要创建一个产品功能展示页面包含标题、描述和三个功能卡片复制起手模板从starter-page.vue开始导入必要组件OButton、OCard、OTag、OLink构建模板结构使用语义化HTML标签和OpenDesign组件应用响应式布局使用24栅格系统添加样式Token所有视觉属性使用--o-*变量集成i18n文案使用国际化函数整个过程只需几分钟生成的代码完全符合工程规范常见问题与解决方案❓ 如何确保颜色使用正确答案只使用语义Token背景用--o-color-fill*文字用--o-color-info*主色用--o-color-primary*。绝对不要使用色板变量或硬编码颜色值。❓ 响应式设计如何处理答案优先使用响应式Token--o-r-*它们会根据视口自动缩放。只有在特殊情况下才使用媒体查询。❓ 组件样式需要修改怎么办答案通过组件props和主题Token实现不要使用:deep()穿透修改组件内部样式。❓ 如何适配不同社区主题答案OpenDesign支持6个社区主题openEuler、Ascend、Kunpeng等主题由消费工程在初始化时设置你的代码只需使用语义Token主题切换自动完成。最佳实践与技巧 快速开发技巧使用组件速查表参考skills/opendesign-codegen/references/component-cheatsheet.md快速找到对应组件利用示例代码查看skills/opendesign-codegen/references/examples/中的完整示例自动化检查运行自检清单中的grep命令快速发现问题 工程化建议保持代码一致性所有项目成员使用相同的起手模板定期更新SkillOpenDesign组件库和Token体系会持续更新文档驱动开发先阅读文档再编写代码 设计协作优化与Pixso设计稿对齐确保设计稿符合OpenDesign规范组件化思维将设计拆解为可复用的OpenDesign组件Token优先在设计阶段就考虑Token的使用开始你的代码直出之旅OpenDesign代码直出不仅是一个技术方案更是一种工作方式的革新。它打破了设计和开发之间的壁垒让创意能够更快地转化为现实。无论你是设计师想要直接输出代码还是开发者希望提高效率这套系统都能为你提供强大的支持。最重要的是生成的代码就是生产代码无需二次转换真正实现了设计即代码的理念。现在就开始尝试吧从skills/opendesign-codegen/references/starter-page.vue模板开始体验从设计意图到生产代码的无缝转换。✨记住核心原则一步到位直接生成合规代码。告别中间转换迎接高效协作的新时代【免费下载链接】opendesign-skillsThe repository of OpenDesign Skills项目地址: https://gitcode.com/openeuler/opendesign-skills创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考