# DESIGN.md 设计参考接入说明

本文件用于给 `jr` 配置仓库存放 UI 设计参考来源。

## 结论

`https://github.com/VoltAgent/awesome-design-md.git` 不是 OpenCode/opencode-jr 的原生 skill 或 plugin 仓库。

- 它不是 `AGENTS.md`
- 它不是 `oh-my-openagent` 配置
- 它不是可直接全局加载的 skill 集合
- 它本质上是一个 `DESIGN.md` 设计灵感索引

因此，这里的集成方式是：

1. 在 `jr` 配置仓库中记录可用设计来源
2. 在具体项目里按需生成 `DESIGN.md`
3. 让 AI 在做 UI / UX / 视觉工作时参考该文件

## 推荐设计来源

### 1. OpenCode 风格

- 页面：`https://getdesign.md/opencode.ai/design-md`
- 用途：AI coding 平台、开发者工具、终端风格暗色 UI
- 官方推荐命令：

```bash
npx getdesign@latest add opencode.ai
```

页面摘要：

> Design System inspired by OpenCode
>
> AI coding platform. Developer-centric dark theme.

### 2. VoltAgent 风格

- 页面：`https://getdesign.md/voltagent/design-md`
- 用途：AI agent framework、终端感暗色界面、黑绿配色
- 官方推荐命令：

```bash
npx getdesign@latest add voltagent
```

页面摘要：

> Design System inspired by VoltAgent
>
> AI agent framework. Void-black canvas, emerald accent, terminal-native.

## 使用方式

在你要开发的项目根目录运行：

```bash
# OpenCode 风格
npx getdesign@latest add opencode.ai

# 或 VoltAgent 风格
npx getdesign@latest add voltagent
```

生成 `DESIGN.md` 后，再在 AI 对话中明确说明：

- “请按当前项目里的 `DESIGN.md` 做 UI”
- “请参考 `DESIGN.md` 的视觉语言实现这个页面”

## 为什么不直接把它配成 jr skill

因为当前证据表明：

- 远端仓库主要是索引/跳转结构
- 不包含可直接接入的 `skills/`、`plugins/`、`AGENTS.md` 或 `oh-my-openagent` 配置
- `DESIGN.md` 的设计目标是**项目级输入**，不是 `jr` 的全局能力注入

所以最稳妥的做法不是伪装成 skill，而是把它记录为 `jr` 的设计参考来源。