31 のスキル、72 のシステム：Open Design ライブラリの仕組み
Open Design を組み合わせ可能にしている 4 つのプリミティブ ── スキル、システム、アダプター、daemon ── を一通り見ていきます。1 つの Markdown ファイルがどのようにピクセル単位で精密な成果物になるのか、具体例とともに。
Open Design は、機構的には、互いに積み重なった 4 つのプリミティブです。
- スキル — エージェントが何をすべきか
- システム — 出力がどう見えるべきか
- アダプター — どのエージェントが作業を行うか
- daemon — それらを結びつけるループ
各プリミティブはファイルのフォルダです。どれもデータベース、プラグインランタイム、ホスト型サービスを必要としません。これがライブラリのすべてです。ログイン壁の裏に隠れた 5 つ目の概念はありません。この記事ではそれぞれを順に見ていき、あなたがエージェントを実際のブリーフに向けたときに何が起きるかを示します。どうやっての前になぜこう形作ったのかという議論を知りたい方は、なぜ Open Design を製品ではなくスキルレイヤーとして作ったのかから始めてください。
スキル：能力の単位
スキルは、1 つの SKILL.md と 0 個以上の補助ファイルを含むフォルダです。Markdown ファイルはエージェントの契約です。フォルダ内のそれ以外のすべては、エージェントがそれを達成するのを助けるためにあります。
スキルフォルダの解剖
典型的なスキルはこのようになります。
skills/
guizang-ppt/
SKILL.md
templates/
magazine.html
examples/
product-launch.html
pitch-deck.htmlSKILL.md は、スキルの名前、トリガー条件、入力の形、出力の形、そしてエージェント向けのインラインのガイダンスを宣言します。templates/ と examples/ フォルダは任意ですが、大きな役割を担います。examples はエージェントがパターンマッチできる既知の良好な成果物であり、それが「デッキを作って」が一貫したものを生むか、即興的なものを生むかの違いになります。
front matter は daemon がスキルを登録するために読む部分であり、本文はエージェントがそれを実行するために読む部分です。
---
name: guizang-ppt
trigger: a deck, slide presentation, or pitch
output: HTML (exportable to PDF, PPTX)
---
Build a horizontal slide deck. One idea per slide.
Lead with a cover, close with a call to action.
Respect the locked-in design system for color, type, and spacing.
Pattern-match against examples/ for layout density and rhythm.なぜファイルがレジストリなのか
daemon が起動すると、skills/ をスキャンし、SKILL.md を含むすべてのフォルダを登録します。プラグインマニフェストはありません。バージョンフィールドもありません。アップロードのステップも、レビューのキューも、ビルドもありません。あるのはファイルであり、ファイルが信頼できる唯一の情報源です。新しいフォルダを入れて daemon を再起動すれば、スキルがピッカーに現れます。削除すれば、消えます。もはや存在しないコードを指す孤立したレジストリエントリは残りません。
私たちは現在 31 のスキルを提供しています。デッキジェネレーターもあれば、モバイルモックアップを生むもの、編集的なページを作るもの、オフィス文書（Word、Excel、PowerPoint）を書くものもあります。それぞれがフォークし、編集し、置き換えられるフォルダです。契約がプレーンテキストなので、「スキルを書くこと」と「何をするのか理解するためにスキルを読むこと」は同じ行為です。開けば監査できるのです。
システム：センスの単位
スキルが何を作るかを記述するなら、システムはそれがどう見えるべきかを記述します。システムは DESIGN.md ファイルに任意の参照アセットを加えたものです。ビジュアルアイデンティティを機械可読な形で記述します。
- 色 — 前景、背景、アクセント、エラーなどの OKLch 値
- タイプ — フォントスタック、ウェイト、タイプランプ、行間の慣習
- スペース — 基本単位、スペーシングスケール、コンテナ幅、ガターのルール
- レイアウトの姿勢 — グリッドの選択、非対称のルール、密度の好み
- ボイス — 言葉のタイポグラフィ：トーン、語彙、文のリズム
DESIGN.md は契約であって、コンポーネントライブラリではない
実際には、DESIGN.md はエージェントが誤解しようのない、短く、意見のはっきりしたブランドブリーフのように読めます。
## Color
--bg: oklch(98% 0.01 95);
--ink: oklch(20% 0.02 260);
--accent: oklch(72% 0.19 35);
## Type
Display — Albert Sans, 600, -0.02em
Body — Albert Sans, 400, 1.7 line-height
## Posture
Generous whitespace. One accent, used sparingly. No drop shadows.色は OKLch なので、明るい面と暗い面をまたいでも知覚的に均一に保たれます。タイプランプはエージェントが逸れないはしごです。姿勢のルールは、生成された 10 枚の画面が 1 つの製品のように感じられるか、10 人の異なるインターンのように感じられるかの違いになります。エージェントはこれを一度読み、ジョブ全体を通して尊重します。
システムは Figma ライブラリではありません。コンポーネントも、バリアントも、ネストされたインスタンスも、あなたとルールの間に立ちはだかるバイナリ形式もありません。それはどんなエージェントでも読め、どんな人間でも監査できる契約です。私たちは標準で 72 のシステムを提供しており、その中には Linear、Vercel、Stripe、Apple、Cursor、Figma のポータブル版や、編集的・ブランド的システムのロングテールが含まれます。
混ぜる、フォークする、所有する
システムは単なるテキストなので、1 つをフォークしてその場で編集したり、バリアントを出したり、集中した作業でおよそ 30 分かけて自分のものをゼロから書いたりできます。プロジェクトの途中でシステムを混ぜることさえできます ── タイポグラフィは Linear から、色のロジックは Vercel から、レイアウトは社内仕様から ── 何も独自のバイナリに縛られていないからです。skills/ と design-systems/ フォルダの分割は意図的です。能力とセンスは直交しているので、どのスキルもどのシステムの下でも動き、どのシステムもどのスキルも駆動できます。
アダプター：エージェントの単位
スキルとシステムは不活性なテキストです。アダプターは、それらを実際に作業を行うエージェントに接続する少量のコードです。アダプターは adapters/ にある短い TypeScript ファイルで、次のことを知っています。
- エージェントがユーザーの
$PATHにインストールされているか検出する - そのエージェントとのセッションを開始する
- スキルの呼び出しを流し込む
- 出力を回収する
私たちは現在 12 のエージェント向けにアダプターを提供しています：Claude、Codex、Gemini、Cursor、Copilot、OpenCode、Devin、Hermes、Pi、Kimi、Kiro、Qwen。daemon はどれが存在するかを自動検出し、初回起動時にドロップダウンとして提示します。何も設定する必要はなく、すでに持っているエージェントが見えるだけです。
| プリミティブ | 存在する場所 | ファイル | 信頼できる情報源 |
|---|---|---|---|
| スキル | skills/ | SKILL.md | ディスク上のファイル |
| システム | design-systems/ | DESIGN.md | ディスク上のファイル |
| アダプター | adapters/ | 1 つの .ts ファイル | register() 呼び出し |
新しいアダプターを追加したい場合、ファイルはおよそ 80 行の TypeScript と 1 回の register() 呼び出しです。学ぶべき SDK も、申請すべき権限も、公開先の中央レジストリもありません。あなたがすでにノート PC で信頼しているのと同じエージェントがエンジンになります ── Open Design がそれを置き換えることは決してありません。（対になる記事 BYOK デザインワークフローでは、アダプターを自分のキーに向ける方法を解説しています。）
daemon：すべてを結びつけるループ
daemon はシステム内で唯一実行中のプロセスです。pnpm tools-dev で起動する小さな Node プロセスで、4 つのことを順に行います。
- 検出（Detect） — 起動時に、インストール済みのエージェントを求めて
$PATHを、インストール済みのスキルを求めてskills/をスキャンする - 発見（Discover） — インタラクティブな質問フォームを開き、現在のブリーフのサーフェス、オーディエンス、トーン、スケール、ブランドコンテキストを絞り込む
- 方向づけ（Direct） — 5 つの決定論的なビジュアルの方向性（OKLch のパレット、フォントスタック、レイアウト姿勢の手がかり）を提示し、1 つを選ぶようユーザーに求める
- 納品（Deliver） — 固定されたシステムで選択されたスキルを呼び出し、エージェントにディスクへ書き込ませ、サンドボックス化された iframe で出力をプレビューする
ループ全体はおよそ 1500 行のコードに収まります。意図的に小さくしてあります。賢さはスキルにあり、ランタイムにはありません ── daemon の仕事は、フォルダをスキャンし、ブリーフを 4 つのステップに通し、邪魔をせず退いていることです。その小ささこそが要点です。ここには腐りうるものがほとんどなく、あなたの作業を人質に取りうるものはほぼ皆無です。
実際にはどう感じられるか
新しい製品機能のローンチデッキが欲しいとしましょう。流れはこうです。
- ターミナルで
pnpm tools-devを実行します。daemon がlocalhost:7780で起動します。 - URL を開きます。daemon が見つけたエージェント（例：Claude、Cursor、Codex）を表示します。
- スキルリストから
guizang-pptを選びます。 - 30 秒の質問フォームが表示されます：オーディエンスは誰か、トーンは何か、ブランドコンテキストは何か。
- 5 つのビジュアルの方向性が表示されます ── 異なるパレット、タイプの組み合わせ、レイアウトの姿勢。1 つを選びます。
- エージェントがディスクに書き込みます。サンドボックス化された iframe が結果を表示します。HTML、PDF、PPTX、ZIP、または Markdown にエクスポートできます。
プリミティブをたどって振り返ると、全体が読み解けます：ステップ 3 はスキルを選び、ステップ 5 はシステムを固定し、その背後のエージェントはアダプターを通して来て、daemon が 4 ステップのループを実行しました。出力は本物です。ファイルはあなたのものです。任意のエディタで編集したり、デザイナーに渡したり、別のスキルに戻して投入したりできます。
なぜデータベースではなくファイルなのか
すべてのプリミティブ ── スキル、システム、アダプター ── はテキストファイルのフォルダです。中央データベースはありません。「Open Design アカウント」もありません。あなたの作業が動き続けるために動き続けねばならないホスト型サービスもありません。
これは意図的なトレードです。私たちは、巧妙なユーザー横断の分析、プロジェクト横断のメモリ、ホスト型のコラボレーションを行う能力を手放します。代わりに手に入れるのは、ポータビリティ、長寿命、監査可能性、そして誰もがライブラリ全体をフォークして自分のバリアントを出せる能力です。今日書かれた SKILL.md は、2 年後のエージェントにも、ツールを一切持たない人間にも、まったく同じように読めます ── 昨年の API に固定されたプラグインについては同じことは言えません。
一世代分のデザインツールが、あなたのファイルを道連れにして死んでいくのを見てきたなら、このトレードに価値がある理由がわかるはずです。
関連する読み物
- なぜ Open Design を製品ではなくスキルレイヤーとして作ったのか — 4 つのプリミティブの裏側にある賭け
- BYOK デザインワークフロー：自分のキーで Claude、Codex、Qwen を動かす — アダプターが、あなたがすでに支払っているエージェントにどう接続するか
- キャンバスが隠していたレイアウトレイヤー — なぜ DESIGN.md の姿勢ルールが、キャンバス上でボックスをドラッグするよりも勝るのか