云乐坊设计系统，统一维护设计原则、品牌视觉、交互规范与可复用 UI 实现。默认视觉为晴空蓝为主，高饱和纯色点缀。
Design 描述产品如何组织信息、表达品牌并提供一致体验；UI 是这些设计规则在界面中的实现。仓库名 design 表达整个体系，npm 包名表达具体用途。
- 设计体系：术语、层次、品牌方向与权威来源。
- 子包职责：每个包的用途、接入方式与成熟度。
- 视觉基础：颜色、字体、布局、交互与明暗主题。
- 色彩与组件：多巴胺色板、成组 token 与共享组件接口。
- 公共使用与发布：接入契约、当前成熟度与发布验收。
- 应用迁移：主站及其他应用的接入顺序与剩余差异。
- AG-UI 交互示例：7 种场景，涵盖流式对话、任务规划、推荐卡片、表单回传、工具确认与中断恢复，提供中英文实时演示。
| 包或目录 | 作用 | 状态 |
|---|---|---|
@yunlefun/ui |
与 Vue 无关的 CSS / SCSS 和设计变量 | 共享样式包 |
@yunlefun/vue |
Ylf* Vue 组件与 Nuxt 接入 |
共享组件包 |
@yunlefun/ui-utils |
DOM 工具，目前主要是元素预览 | 实验性源码，发布入口尚未完善 |
@yunlefun/metadata |
生成组件索引，支持文档导航和构建 | 源码公开，不发布到 npm |
packages/css |
动画等样式示例 | 普通目录，不是 npm 包 |
| Registry | 从共享源码生成可复制条目 | 分发渠道，目前有 tokens、Button、Dialog |
@yunlefun/design-monorepo 设置了 private: true 以防止误发到 npm；这不限制仓库源码的 MIT 开源许可。源码中的新主题需要经过包发布和应用升级后才会进入业务站点。
pnpm add @yunlefun/ui @yunlefun/vue
pnpm add -D sass在应用入口加载共享 token，CSS 与 SCSS 入口任选一个：
import '@yunlefun/ui/css'@use '@yunlefun/ui/styles';Vue 组件从明确的子路径导入；Nuxt 可通过模块注册组件。完整示例见开始使用与 Vue 接入。
仅使用 CSS token 的项目不需要安装 Vue 或 Sass；Vue SFC 组件仍需要 Sass。当前公开版本为 @yunlefun/ui@0.0.4 和 @yunlefun/vue@0.1.3；主站已从 npm 包复用共享 token。
文档和 Registry 统一部署在 design.yunle.fun。Cloudflare Pages 沿用 ui 项目，通过 Git 集成部署 main 分支。
旧文档域名由 Cloudflare Redirect Rules 执行 301 永久跳转，保留原路径和查询参数。
依赖安全验收运行 pnpm run audit。尚无上游修复版的三个漏洞使用精确版本补丁、漏洞回归测试和锁文件哈希核验；原始 npm 报告与本地修复的区别见依赖安全补丁说明。
pnpm install
pnpm docs:devpnpm lint
pnpm typecheck
pnpm exec vitest run
pnpm docs:build
pnpm ui:verify组件或 token 变更后，由 pnpm registry:build 更新分发产物。更多边界见架构与 Registry 分发。
欢迎通过 Issue 和 Pull Request 参与改进。行为规范见社区行为准则，漏洞请按安全策略私下报告。公共组件仍处于早期版本，支持范围和验收要求见公共使用与发布。
维护者通过带 release- 前缀的 Git 标签触发 npm Trusted Publishing；两个包共用 OIDC 发布工作流，不使用长期 npm 发布令牌。版本准备、信任关系配置与验证步骤见发布指南。