设计层 · UI/UX 路由
开源协作不只是代码——帮别人的项目修 UI bug、给组件库提 PR、 建仓做 docs 站，都需要设计能力。本 skill 是设计层的路由器。
§1 设计系统选择（按项目气质）
| 气质 | 设计系统 | 关键词 | 参考 skill |
|---|---|---|---|
| 极简高端 | Apple Design | 负字距标题/单色调+一个强调色/大留白/无装饰渐变 | apple-design + DESIGN-apple.md |
| 企业中后台 | TDesign | 腾讯开源企业级/多框架(React/Vue/小程序)/主题定制 | ui-ux-pro-max |
| 微信生态 | WeUI | 微信原生体验/小程序规范/轻量 | — |
| 现代开发工具 | shadcn/ui | Tailwind/Radix/可组合/暗色主题 | shadcn |
| 创意表现 | Libraries.dev | Border beam/Thinking orbs/液体金属等效果 | libraries-dev |
选择原则：跟着目标仓走——目标仓用什么组件库，就遵循什么设计规范。 不要把自己的偏好强加到别人的项目。
§2 组件库规范（贡献 UI 库时必读）
TDesign 系列（腾讯开源企业级 UI）
- 仓库：Tencent/tdesign-{vue-next,react,mobile-vue,mobile-react,...}
- 贡献前读：仓内 CONTRIBUTING + design 目录的设计规范
- 组件 PR 要过：视觉还原度 + 交互规范 + 无障碍 + 主题变量
WeUI（微信原生 UI）
- 仓库：Tencent/weui + weui-wxss
- 贡献前读：微信小程序设计指南（weui 是其官方实现）
- 小程序 UI 修改需确认：iOS/Android 双端表现一致
QMUI（Android/iOS UI 框架）
- 仓库：Tencent/QMUI_Android + QMUI_iOS
- 贡献前读：各自平台的 QMUI 规范文档
§3 设计审查（写完 UI 后过一遍）
用 web-design-guidelines skill 检查：
- 可访问性（对比度/键盘导航/ARIA 标签）
- 响应式（320px/768px/1024px/1440px 四档）
- 暗色模式兼容（prefers-color-scheme）
- 性能（首屏 <3s/图片 lazy/字体 subsetting）
§4 S 场景集成
| 场景 | 什么时候调用 | 调什么 |
|---|---|---|
| S2 修 bug | issue 涉及 UI 组件（按钮/表单/弹窗渲染异常） | §2 对应组件库规范 + frontend-ui-engineering |
| S2 修 bug | bug 是视觉问题（间距/颜色/排版错乱） | §1 设计系统 + DESIGN-apple.md token |
| S3 文档 | 目标仓 README 有截图/logo | oss-format §徽章/图片规则 |
| S5 建仓 | 需要 docs 站（VitePress） | §1 选择设计系统 + vitepress 主题定制 |
| S5 建仓 | 需要 landing page | frontend-design + design-taste-frontend |
§5 设计 token 快查（来自 DESIGN-apple.md）
# Apple 极简系（高端产品/开发者工具/文档站首选）
primary: "#0066cc" # 唯一交互色
ink: "#1d1d1f" # 正文
canvas: "#ffffff" # 画布
canvas-parchment: "#f5f5f7" # 浅灰区块
font: "SF Pro Display, system-ui" # 系统字体栈
hero-size: 56px / 600 / -0.28px letter-spacing # 大标题
# 原则：UI 退后让产品说话——无装饰渐变、无 chrome 阴影、仅产品图一个 drop-shadow
完整 token 见 references/design-tokens-apple.md（562 行：颜色/字体/间距/组件/动效/深色模式全覆盖）
§6 与其他层的关系
| 层 | 管什么 | 本层怎么配合 |
|---|---|---|
| oss-voice | 文档写什么 | 设计文档的文案过 oss-voice |
| oss-format | 文档怎么排 | 设计文档的排版过 oss-format |
| oss-workflow | 场景路由 | S2/S5 checklist 的 UI Gate 调用本 skill |
| frontend-* skills | 具体实现 | 本 skill 路由到它们执行 |
§7 外部设计 skill 资源
ui-skills.com — UI 设计/前端体验/动效/可访问性/设计系统/界面质感优化能力合集，可直接给 AI Agent 调用。当本 skill §1-§3 的规则不够用时（需要更细的动效/无障碍/质感指导），从这个合集按需拉取对应 skill 补充。
覆盖：UI 设计基础 · 前端体验 · 动效（micro-interaction/transition） · 可访问性（WCAG/screen reader） · 设计系统（token/组件规范） · 界面质感（polish/refinement）
诚实边界
- 设计 token 来自 Apple 公开设计语言的分析，非 Apple 官方规范
- Tencent org 组件库的完整规范在各自仓库内，本 skill 只做路由不做复制
- 设计审美有主观性——最终裁决权在目标仓的维护者