一つのデザインシステムを、エージェントが作るすべてに適用

Open Design でのデザインシステムの流れ

1. 01

   システムを捉える

   ブランドを説明します — 色、文字組み、余白、声 — または既存のサイトをエージェントに指して抽出させます。Open Design がそれをプロジェクト内にある DESIGN.md に書き込みます。

2. 02

   実証済みのベースから始める

   Open Design は140以上の参照デザインシステムを備えています — Apple や Linear からエディトリアル、ブルータリストまで。白紙から始めるのではなく、自分のブランドに近いものをフォークしましょう。

3. 03

   どこにでも適用する

   他のすべてのスキルが同じシステムを読むので、プロトタイプも、資料も、ダッシュボードも、一つのビジュアル言語を共有します — 毎回それを指定し直すことなく。

4. 04

   一か所で進化させる

   システムを変えれば、次のレンダリングがそれをどこでも反映します。リポジトリ内のファイルなので、デザインの判断はコードのようにレビューされバージョン管理されます。

Open Design でのデザインシステム vs これまでのやり方

出発点としてフォークできる140以上の参照システムのほんの一部。自分のブランドに近いものを選び、適応させてください。

デザインシステムを見る →

デザインシステム FAQ

1. 01 ここで言うデザインシステムとは正確には何ですか？ +

   色、文字組み、余白、コンポーネント、声を捉えた、リポジトリ内の DESIGN.md ファイルです。Open Design のすべてのスキルがそれを読むので、あなたのブランドがエージェントの生み出すものに自動的に適用されます。

2. 02 ゼロから始めなければなりませんか？ +

   いいえ。Open Design はフォークできる140以上の参照デザインシステムを備えています — Apple や Linear からエディトリアル、ブルータリストまで — そこから自分のブランドに適応させます。

3. 03 資料、ダッシュボード、プロトタイプをまたいでどう一貫性を保つのですか？ +

   それらのスキルがすべて同じ DESIGN.md を読むからです。システムを一度定義すれば、手で取り締まるものではなく、一貫性が自動になります。

4. 04 どのエージェントを使えますか？ +

   Claude Code、Codex、Cursor Agent、Gemini CLI、その他のファーストパーティアダプター。プロバイダーの鍵は自分で持ち込みます。