opencode/docs/design-md.md

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
• 官方推荐命令：

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、终端感暗色界面、黑绿配色
• 官方推荐命令：

npx getdesign@latest add voltagent

页面摘要：

Design System inspired by VoltAgent

AI agent framework. Void-black canvas, emerald accent, terminal-native.

使用方式

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

# 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 的设计参考来源。