Fluent 2 Design Skills

把微软 Fluent 2 设计系统提取为一套框架无关的设计 skills，供 AI agent 在任意 UI 框架（CSS/UnoCSS/Tailwind、React、Vue 3、Flutter、Web Component 等）里复用「同一套设计语言」。

优先级约定：TypeScript 优先、Vite 8 优先（Vite 8 是首个 Rolldown 稳定版），相关框架指南一律用 .ts 配置。

核心理念

Fluent 2 的设计资产真正与框架解耦的核心是 design tokens（@fluentui/tokens 里那套语义 token）。 本仓库把「不可变的语义规则」（语言层）与「可变的框架映射」（适配层）分离：

• 语言层（框架无关）：foundations / tokens / components / patterns / verify
• 适配层（各框架）：css / vue / react / flutter

改框架不动语言，反之亦然。AI 依据 tokens 输出正确的语义值而非硬编码的心血来潮值，再由 adapter 翻译成目标框架表达。

技能清单

Skill 名	类型	作用
fluent-foundations	语言	设计原则、栅格、间距标度、层级逻辑、无障碍规则
fluent-tokens	语言	语义 token 字典（真实值来自 @fluentui/tokens）
fluent-components	语言	组件解剖（anatomy / parts / 状态 / 尺寸 / 行为规格）
fluent-patterns	语言	布局 / 导航 / 表单 / 数据展示等模式
fluent-adapter-css	适配	token → CSS 变量 / UnoCSS preset（TS） / Tailwind config
fluent-adapter-vue	适配	token → Vue 3（Vite 8 + TS）+ UnoCSS / Fluent Web Components
fluent-adapter-react	适配	token → React / Fluent UI React v9（TS，Vite 8）
fluent-adapter-flutter	适配	token → Flutter ThemeData / ThemeExtension
fluent-verify	工具	用 token/规则做一致性审计的 checklist

数据来源

• 语义 token 数值直接从官方 @fluentui/tokens 包抽取：data/tokens/fluent-tokens.json （含 global 色板、typography、spacing、radius、stroke、durations、curves，以及 light/dark 两套 184 个语义 token 的真实解析值）。
• 参考官方：Fluent 2 Design tokens 。
• 本项目 skills 本身为 MIT 许可（Fluent token 值随其包许可证使用）。

目录结构

fluent2-design-skills/
├── README.md
├── install.sh              # 安装到 DSH 或 .agents skills 目录（Bash / macOS / Linux）
├── install.ps1             # 安装到 DSH 或 .agents skills 目录（PowerShell / Windows）
├── data/                   # 机器可读参考数据（token 等）
│   └── tokens/fluent-tokens.json
├── skills/                 # 标准 SKILL.md 目录集（tool-agnostic）
│   ├── fluent-foundations/
│   ├── fluent-tokens/
│   ├── fluent-components/
│   ├── fluent-patterns/
│   ├── fluent-adapter-css/        # CSS / UnoCSS preset(TS) / Tailwind
│   ├── fluent-adapter-vue/        # Vue 3 + Vite 8 + TS
│   ├── fluent-adapter-react/
│   ├── fluent-adapter-flutter/
│   └── fluent-verify/
└── .dsh/skills/            # 本机 DSH 可加载的符号链接

安装（DSH / Anthropic skills）

./install.sh --dsh          # 装到项目 .dsh/skills（或 ~/.dsh/skills）
./install.sh --agents       # 装到 ~/.agents/skills

Windows（PowerShell）：

.\install.ps1 --dsh           # 装到项目 .dsh/skills（或 -User 装到 ~/.dsh/skills）
.\install.ps1 --agents        # 装到 ~/.agents/skills

install.ps1 优先建符号链接；无管理员/开发者模式权限时自动降级为目录联接（junction），再退化为整目录复制，保证在受限环境中也能完成安装。

DSH 会从项目 .dsh/skills、~/.agents/skills、~/.dsh/skills 自动发现 SKILL.md。

使用方式

触发任意一个 skill（如 fluent-tokens、fluent-foundations）后，agent 把其内容当作「设计语言规范 + 参照数据」，据此生成框架代码；跨框架时切换对应 fluent-adapter-* 即可。