为你的 agent 准备的设计系统.

浏览真实世界的设计系统范例——品牌级的色板、字体、动效与文风,你的 coding agent 可一键套用到任何项目。每个系统都开源,支持 Claude、Codex、Cursor 等。

什么是设计系统?

设计系统是一套可复用的品牌基础——色板、字体、间距、动效与文风——让每个界面保持一致。在 Open Design 中,每个设计系统都是一个插件:把项目绑到某个系统,你的 coding agent 会自动继承它的色板、字体、动效与文风,产出始终贴合品牌。

每一套系统都是一个 DESIGN.md 文件

这里的每套设计系统都是一个 DESIGN.md——一份人类和 agent 都能读懂的 markdown 规范,记录品牌的视觉主题、色彩角色、字号层级和交互语言。它存放在你的仓库里,随 git 版本管理,并跟随你的项目一起流转。

把 Claude Code、Cursor 或任意编程 agent 指向这个文件,它生成的每个组件、页面和素材都会继承相同的品牌身份。DESIGN.md 是一种开放的 Apache-2.0 格式;Open Design 则是围绕它构建的开源、本地优先的库与工具链。

# Design System Inspired by Linear

> Category: Productivity
> Focused, low-chrome workspace. Inter, tight grid, restrained color.

## 1. Visual Theme & Atmosphere
A calm, dense product surface where typography and spacing
carry the hierarchy and color is used sparingly for intent.

## 2. Color Palette & Roles
### Primary
- **Ink** (`#0d0e10`): Primary text and dark surfaces.
- **Violet** (`#5e6ad2`): Action and focus accent.
- **Surface** (`#f4f5f8`): Light canvas for content blocks.
DESIGN.md 片段示例
  1. 01

    选一套系统

    浏览上方的库,打开任意系统即可阅读其完整的 DESIGN.md——配色、字体、动效和语气。

  2. 02

    放进你的项目

    把 DESIGN.md 保存到仓库根目录。它就是纯 markdown——无需构建步骤、无需账号、无需导出。

  3. 03

    让你的 agent 指向它

    让 Claude Code 或 Cursor 遵循 DESIGN.md,每一份输出都会与品牌保持一致。

DESIGN.md 是一种开放格式(Apache-2.0)。Open Design 的系统可在 GitHub 上自由阅读、fork 和贡献。

常见问题

  • 什么是设计系统?

    设计系统是品牌视觉语言的唯一事实来源——配色、字体、间距、动效和语气——让每个界面和素材都像同一个连贯的产品。

  • 什么是 DESIGN.md 文件?

    DESIGN.md 是一种基于 markdown 的开放格式,用人和 AI 编程 agent 都能读懂的方式描述设计系统。它把色彩角色、字号层级和交互模式记录为纯文本,保存在你的仓库里。

  • 如何在 Claude Code 或 Cursor 中使用 DESIGN.md?

    把文件保存到项目根目录,并让你的 agent 遵循它。Open Design 还能把项目绑定到某套系统,让每一份插件输出自动继承相同的品牌身份。

  • 这些设计系统是免费的吗?

    是的。这里的每套系统都是开源的,可自由阅读、下载、fork 和贡献。Open Design 本身采用 Apache-2.0 协议,且本地优先。

  • 一共有多少套设计系统?

    150 套且持续增长,涵盖消费科技、编辑排版和实验性风格。新系统会定期上线,你也可以在 GitHub 上贡献自己的系统。

  • 我能创建自己的 DESIGN.md 吗?

    可以——手写一份 DESIGN.md,或让 Open Design 从一个参考网站生成一份,然后在每个项目和 agent 中复用它。