150 個のデザインシステム。.

プラグインが `od.craft.requires` で採用できるブランド紐付きデザインシステム。それぞれパレット、タイポグラフィ、モーション、ボイスを持ち、プロジェクトをシステムに紐づければすべてのプラグイン出力が同じアイデンティティを引き継ぎます。

デザインシステムとは?

デザインシステムとは、カラーパレット、タイポグラフィ、スペーシング、モーション、ボイスなど、すべての画面を一貫させるための再利用可能なブランド基盤のセットです。Open Design では各デザインシステムはプラグインとして提供されています。プロジェクトにスナップするだけで、コーディングエージェントがパレット、タイプ、モーション、ボイスを自動的に継承し、生成されるすべてのものがブランドに沿ったものになります。

すべてのシステムは DESIGN.md ファイル

ここにある各デザインシステムは1つの DESIGN.md です。人間と agent の両方が読めるマークダウン仕様で、ブランドのビジュアルテーマ、カラーの役割、タイポグラフィのスケール、インタラクションの言語を定義します。リポジトリ内に置かれ、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 をリポジトリのルートに保存します。プレーンなマークダウンなので、ビルド工程もアカウントもエクスポートも不要です。

  3. 03

    agent をそこに向ける

    Claude Code または Cursor に DESIGN.md に従うよう指示すれば、すべての出力がブランドと一貫したものになります。

DESIGN.md はオープンフォーマットです(Apache-2.0)。Open Design のシステムは GitHub で自由に読み、フォークし、貢献できます。

よくある質問

  • デザインシステムとは何ですか?

    デザインシステムとは、ブランドのビジュアル言語(パレット、タイポグラフィ、スペーシング、モーション、トーン)の単一の信頼できる情報源です。これにより、すべての画面とアセットが一貫した1つのプロダクトのように感じられます。

  • DESIGN.md ファイルとは何ですか?

    DESIGN.md は、デザインシステムを人と AI コーディング agent の両方が読める形で記述するための、オープンなマークダウンベースのフォーマットです。カラーの役割、タイプスケール、インタラクションパターンを、リポジトリに保管するプレーンテキストとして定義します。

  • Claude Code や Cursor で DESIGN.md をどう使いますか?

    ファイルをプロジェクトのルートに保存し、agent にそれに従うよう指示します。Open Design ではプロジェクトをシステムにスナップすることもでき、すべてのプラグイン出力が自動的に同じアイデンティティを継承します。

  • これらのデザインシステムは無料ですか?

    はい。ここにあるすべてのシステムはオープンソースで、自由に読み、ダウンロードし、フォークし、貢献できます。Open Design 自体も Apache-2.0 でローカルファーストです。

  • デザインシステムはいくつありますか?

    現在 150 件あり、さらに増え続けています。コンシューマーテック、エディトリアル、実験的なスタイルにわたります。新しいシステムは定期的に追加され、GitHub であなた自身のものを貢献できます。

  • 自分の DESIGN.md を作成できますか?

    はい。DESIGN.md を手で書くこともできますし、Open Design に参照サイトから生成させることもできます。そして、それをすべてのプロジェクトと agent で再利用できます。