opendesign-application
Installation
SKILL.md
OpenDesign 工程化落地指南
本 skill 解决"如何把 OpenDesign 设计系统正确集成进一个工程项目"的问题——面向新建项目或改造现有项目采用 OpenDesign 的开发者,覆盖脚手架、主题系统集成、全局样式基础设施、目录组织、编码约定与 code review 检视。
提供两套可直接 clone 运行的脚手架(templates/):
| 脚手架 | 路径 | 形态 | 适用场景 |
|---|---|---|---|
| Nuxt 4 SSR | templates/nuxt |
服务端渲染 + 静态生成 | 官网、内容站、需要 SEO 的场景 |
| Vite + Vue 3 SPA | templates/vue-spa |
单页应用 | 后台管理、工具站、不需 SSR 的应用 |
两套脚手架均已完成:OpenDesign 主题初始化、Pinia 主题 store、SCSS mixin 全局注入、响应式栅格容器、AppSection 楼层组件(统一消费设计令牌承担楼层级宽度/间距/标题排版规范)、全 token 驱动样式。每套脚手架根目录包含 AGENTS.md——为 AI 编码工具(及不熟悉代码的设计师)提供架构约束、组件拆分规范、公共抽象模式与最佳实践指导,确保即使不具备前端工程背景也能按规范产出合规代码。
脚手架内 AGENTS.md
两套脚手架各自根目录下的 AGENTS.md 是面向在脚手架项目中工作的 AI 工具与设计师的操作指导(第一层),与本 SKILL.md(第二层:工程化集成参考)互补: