参考リンク
Piに関する参考資料
公開ガイドに記載されている、Piでのデザイン作業向けチュートリアル、ドキュメント、ウォークスルー。
Pi 
OpenDesign OpenDesign で
Pi と
デザインする。
OpenDesignでPiを使ってインターフェースをデザインする方法について説明します。ポータブルなスキル、選択するモデルとキー、ブリーフからレビュー済みファイルまでの1つのプラン比較タスク、そして始める前に知っておくべき制限を取り上げます。
このPiガイドの3つの道筋
Piの出発点を選ぶ
1つの完全なPiデザインタスク
Piによるデザイン作業：ブリーフからインターフェースまで
1つのタスクをループ全体に沿って追います。ブリーフと制約として何を渡すか、Piが返す成果物、そして完成とする前に残るチェック項目です。以下のインターフェースはこのページ用に作られた例示であり、記録されたPiの実行ではありません。
1設計ブリーフと制約条件
ブリーフメモアプリのプラン比較ページをデザインしてください：無料プラン、個人プラン、チームプランの比較、機能比較表、短いFAQです。デスクトップとスマートフォン対応。
- デザインシステムOpenDesignのペーパーキャンバス：Albert Sans、グリーンのアクセント1色
- ブレークポイント1440pxデスクトップと390pxモバイル、横スクロールなし
- インタラクション請求の切り替え、プランCTA、展開可能な比較行
- 出力安定した
data-od-idフックを持つ、自己完結型のHTMLファイル1つ
2役割分担：あなた、Pi、OpenDesign
- あなた
あなたがブリーフを書き、デザインシステムを選び、受け入れ基準を設定します。
- Pi
Piはレイアウトを計画し、HTML、CSS、JavaScriptを書き、要求に応じて修正します。
- OpenDesign
OpenDesignはデザインシステムとスキルを提供し、プレビューをレンダリングし、すべてのバージョンをプロジェクトファイルとして保存します。
- レビュー
引き渡し前に、視覚的階層、8pxグリッド上の間隔、両方のブレークポイント、すべてのインタラクションを確認します。
3Piの成果物：1440pxと390pxでのプラン比較ページ
4ハンドオフ前のレビュー
レイアウト
グリッドとスペーシング
3つのプランと比較は同じ8pxグリッドを使用しており、機能行は列をまたいで揃っています。
階層
視覚的階層
価格とプラン名が主導し、アクセントが最も選ばれているバッジとそのボタンを示します。
レスポンシブ
モバイルレイアウト
順序：パーソナルプラン、次に無料、次にチーム。切り替えは上部に留まります。
インタラクション
インタラクションの確認
スイッチを切り替え、CTAをTabで移動し、比較行を1つ開きます。
適合性
Piが適している場合—そして適していない場合
Piが適しているのは
- あらゆるモデルを、自分のキーで。 自分のキーでAnthropic、OpenAI、Googleなどにリクエストを送信できます。スクリーンショットからUIへの変換には強力なマルチモーダルモデルを選び、/modelで切り替えます。
- ポータブルなスキル。 デザイン規約をAgent-Skills標準のスキルにまとめれば、Piだけでなく互換エージェント間で持ち運べます。
- MCP + 拡張機能。 Figma MCPサーバーを通じて実際のデザインコンテキストを取得し、TypeScript拡張機能で検証ループを自動化します。
- オープンかつBYOK。 MITライセンスでローカルファースト。支払いは基盤モデル分のみで、認証情報はあなたのマシンに留まります。
別のワークフローを選ぶべきケース
- 編集可能なベクターファイルが必要な場合。 成果物はHTMLであり、編集可能なデザインドキュメントではありません。必要なアセット形式には別のベクターワークフローを検討してください。
- リファレンスも制約もない場合。 デザインシステムや例がないと、出力は一般的な見た目になりがちです。まずブリーフを書きましょう。
- このエージェントに必要な認証情報がありません。 必須：お使いのプロバイダーの API キー（ご自身のキーを持参）または /login によるサブスクリプションログイン。OpenDesign は認証情報を提供・中継しません。
- チームがAiderやOpenCodeで作業している場合。 これらのエージェントにはそれぞれのページがあります。共通のワークスペースは変わりませんが、セットアップは異なります。関連エージェントを参照してください。
互換性
開始前に必要な Pi の要件
このページは、OpenDesignデスクトップアプリ経由で接続したPiを扱います。公開リファレンスは2026年9月6日に確認しました。
対応範囲Pi（コミュニティ提供）
Piはearendil-worksによるオープンソース（MIT）のターミナルAIコーディングエージェントです。コードベースを読み、ファイルを編集し、コンパクトな4ツールのコア（read、write、edit、bash）からコマンドを実行します。このページはOpenDesignを通じてPiでインターフェースを設計することについてであり、Pi自身のインターフェースではありません。OpenDesignのセットアップノートに利用可能なエージェントが記載されています。
アカウントと認証ご自身のプロバイダーAPIキー（BYOK）、または
ご自身のプロバイダーAPIキー（BYOK）、または /login によるサブスクリプションログインです。ご自身のプロバイダーAPIキー（BYOK）またはサブスクリプションログインで認証してください。認証情報はお使いのマシンに留まります。このページでは利用枠や料金を保証するものではありません。
システムとバージョンデスクトップアプリまたはソース
デスクトップビルドについてはダウンロードページを参照してください。ソースのクイックスタートにあるNode.jsとpnpmの要件は、ソースから実行する場合に適用され、デスクトップパッケージをインストールする場合には適用されません。互換性のある最小Piバージョン：ここでは未検証です。
接続確認成功の目安
インストールしたバージョンに表示される接続手順を使い、小さなタスクを実行してください。Piがそれを処理したこと、成果物が開くことを確認します。ダウンロードだけでは動作する接続は確立されません。
デスクトップアプリから始める
Pi のセットアップ：3つのステップ
まずダウンロードし、インストールしたバージョンのPiセットアップを完了させ、小さな結果を確認します。この道筋ではOpenDesignをソースからビルドする必要はありません。
- 1
OpenDesignデスクトップアプリをダウンロードする
お使いのコンピューターに合ったパッケージを選び、インストールしてアプリを起動します。
OpenDesignをダウンロードチェックポイントデスクトップアプリが開きます。すでにインストール済みですか？次のステップに進んでください。再度ダウンロードする必要はありません。 - 2
Pi の接続を準備する
インストールしたバージョンのPiの指示に従います。自分のプロバイダーAPIキー（BYOK）またはサブスクリプションログインで認証します。認証情報はあなたのマシンに留まります。
Pi のプロバイダーと認証に関するドキュメント# 1. Install the Pi coding agent CLI (Node) npm install -g --ignore-scripts @earendil-works/pi-coding-agent # 2. Authenticate with your own provider key (BYOK) export ANTHROPIC_API_KEY=sk-ant-... # or OPENAI_API_KEY=sk-... # (or run /login inside Pi for a Claude / ChatGPT / Copilot subscription)公開ガイドのPiセットアップノートから引用。最新のコマンドはベンダーのドキュメントを確認してください。
チェックポイント意図したエージェントとアカウントを確認します。利用できない場合は、より大きなタスクを試す前に互換性を確認してください。 - 3
小さな Pi タスクを1つ実行する
1回の修正を含め、ループ全体を判断できる範囲の定まったブリーフから始めます。
スターターブリーフプロフィールフォームと保存確認を備えた設定画面を作成してください。私のデザインルールを適用してください。デスクトップとモバイルの幅で確認してください。
チェックポイント結果を開き、保存状態をテストし、具体的な変更を1つ依頼します。レビューはファイルが生成されたときに始まり、そこで終わるものではありません。
OpenDesignをソースから実行するには、代わりにテクニカルクイックスタートを使用してください。
Pi のデザインワークフロー
Piの5ステップデザインワークフロー
1つのプラン比較ページをブリーフから検証済みの成果物まで追います。各ステップでは、あなたの入力、Piの動き、OpenDesignの貢献、そしてあなたのレビューポイントを示します。
- 1
デザインブリーフ
簡潔に短く、3〜6行に収めます。対象ユーザー、画面の目的、プラットフォームを明記します。
- あなたブリーフを作成し、あればリファレンスのスクリーンショットを添付します。
- Piブリーフとプロジェクトのスキルファイルを読み、曖昧な点があれば質問します。
- OpenDesignプロジェクト、プロンプトインターフェース、成果物タイプのスキルを提供します。
- 確認ブリーフに受け入れ基準が含まれているか確認します。今追加する方が、生成後の修正よりコストが低く済みます。
- 2
デザイン制約
デザインシステムと厳格なルール。これがPiの出力を一般論的ではなくブランドに沿ったものに保ちます。
- あなたデザインシステムを選び、ブレークポイントと必要なコンポーネントを指定します。
- Piコードを書く前にDESIGN.mdのトークンとポスチャールールをコンテキストに読み込みます。
- OpenDesignデザインシステムライブラリを提供し、あなたの選択をスキルテンプレートに紐付けます。
- 確認トークンがブランドに合っているか確認します。単一のアクセント、正しいフォント、適切な角丸です。
- 3
インターフェースを生成する
Piは単一の自己完結型HTMLファイルを生成します。レイアウト、スタイル、インタラクション、安定したフックを含みます。
- あなた待つか、確認の質問に答えます。設定は不要です。
- Piセクションを計画し、HTML、CSS、JavaScriptを書き、ファイルを実行し、失敗を修正します。
- OpenDesign成果物をプロジェクトフォルダーに保存し、プレビュー用にインデックス化します。
- 確認まだ何もしません。ソースではなく、レンダリングされたファイルを評価します。
- 4
プレビュー
ファイルは指定した幅でOpenDesign内にレンダリングされます。ここでデザインが評価されます。
- あなた幅を切り替え、インタラクションをテストし、要素にコメントを残します。
- Piプレビューのコメントを読み、次の修正を準備します。
- OpenDesignプレビューをレンダリングし、コメントと編集の対象となる
data-od-idを公開します。 - チェック階層、コントラスト、390pxでのオーバーフロー、フォーカス状態、アクセントが控えめに保たれているかを確認します。
- 5
修正と検証
プレビュー内の要素を指定して変更を依頼します。各リビジョンは新しいファイルです。何も黙って上書きされることはありません。
- あなたコメントをリクエストに変換し、タスクがいつ完了したかを判断します。
- Pi変更をその場で適用し、ファイルを再実行します。
- OpenDesignバージョンを並べて保持し、完了時に画像またはHTMLをエクスポートします。
- チェック変更された領域だけを再確認し、その後、各ブレークポイントでページ全体を1回確認します。
リソース
Piのデザインリソース
制限事項
Piの制限事項、手動チェック、フォールバック
- スコープPiはプロバイダー非依存です。Anthropic、OpenAI、Google、および20以上のプロバイダーをまたいで正規化するため、自分のキーを持ち込み、セッションの途中でモデルを切り替えられます。このページは、OpenDesignに接続されたエージェントとしてのPiを扱うものであり、Piのすべての機能を扱うものではありません。
- 使用制限使用制限とコストは、あなたの認証情報（自分のプロバイダーAPIキー、または/loginによるサブスクリプションログイン）に従います。このページは無料枠について何も主張しません。
- ネットワークローカルプロジェクトファイルはオフライン推論を意味しません。機密性の高い入力を共有する前に、Piのプロバイダー設定とデータポリシーを確認してください。
- 出力は HTML です成果物は HTML ファイルであり、ベクター形式のデザインファイルではありません。
- 手動レビューアクセシビリティ、実際のコンテンツ、ブランド適合性、インタラクションの正確さは、プレビュー内であなたが確認します。エージェントの自己チェックは一次確認として扱ってください。
- フォールバックPiが利用できない場合、またはタスクが失敗した場合は、インストールされているバージョンの接続手順と認証を確認してください。設定を変更する前に、エラーと最後に正常だった成果物を保存してください。
よくある質問
PiとOpenDesignに関するよくある質問
Piは本当にデザイン作業ができますか？
はい。美的スキル、デザインシステム、そしてコンテキスト内の実際の参照画像があれば、Piは本番品質のレスポンシブなUIを生成でき、出力を参照画像と照合検証するために、強力なマルチモーダルモデルにルーティングすることもできます。そうしたコンテキストがない場合、Piは汎用的な見た目に陥りがちであり、これがOpenDesignが埋めるギャップです。
Piでデザインするには料金が必要ですか？
Pi自体は無料でオープンソース(MIT)です。料金が発生するのは基盤となるモデルのみで、ご自身のプロバイダーAPIキー(BYOK)を持ち込むか、/login経由でClaude Pro/Max、ChatGPT Plus/Pro、GitHub Copilotのサブスクリプションを使用します。どちらの場合でも、OpenDesignが認証情報を代理で扱うことはありません。
Piがデザインに適している理由は？
Piはプロバイダーに依存しません。ご自身のキーを持ち込み、20以上のプロバイダーのいずれにもルーティングできるため、タスクに適した強みを持つモデルを選び、セッションの途中でも切り替えることができます。ただし、センスはモデルからではなく、あなたが用意するデザインシステム、スキル、参照から生まれます。
フロントエンドデザインでPiと併用すべきモデルはどれですか？
Piは多くのプロバイダーにルーティングできるため、タスクごとに選択してください。強力なマルチモーダルモデルは参照スクリーンショットの読み取りに優れ、他のモデルはリファクタリングに適している場合があります。Piの利点は、ワークフローを変えずに切り替えられることです。OpenDesignでは、どのモデルを選んでも同じデザインコンテキストを維持できます。
PiをFigmaに接続するにはどうすればよいですか？
PiはMCPサーバーをサポートしているため、Figma用のMCPサーバーを追加して、コンポーネント、変数、レイアウトデータなど実際のデザインコンテキストを取得できます。これにより、生成されるコードは近似ではなく、ソースと一致するようになります。
Piとは実際に何か
Piは、ターミナル用のオープンソース（MIT）AIコーディングエージェントであり、earendil-works pi toolkitの一部です。リポジトリを読み、ファイルを編集し、シェルコマンドを実行します — 単に行を補完するのではなく、自然言語のタスクから作業を計画し検証します。そのコアは意図的に小さく、4つのデフォルトツール — read、write、edit、bash — に加えて、組み込みのgrep、find、lsがあります。
デザイン作業において際立った特性は、Piがプロバイダー非依存であることです。Anthropic、OpenAI、Google、その他多くのプロバイダーを1つの統一APIの背後で正規化するため、自分のキーを持ち込み、タスクごとにモデルを選択できます — 例えば、参照スクリーンショットを読むための強力なマルチモーダルモデル — そしてワークフローを変えずにセッション中に/modelまたはCtrl+Lで切り替えられます。
あらゆるモデル、自分のキー：PiはAnthropicやOpenAIを含む20以上のプロバイダーにルーティングします。自分のAPIキー（BYOK）で認証するか、/loginでClaude Pro/Max、ChatGPT Plus/Pro、GitHub Copilotのサブスクリプションにサインインします。
Skills + Extensions：PiはSkills（Agent Skills標準に従うMarkdown機能パッケージ）とTypeScript Extensionsを読み込みます — デザイン規約をエンコードし、カスタムツールを追加する自然な場所です。
分岐セッション：セッションはJSONLツリーとして保存されるため、探索を分岐し、単一ファイル内で履歴をナビゲートでき、以前のパスを失いません。
認証情報：自分のプロバイダーAPIキー（BYOK — Anthropic、OpenAI、Googleなど）または/login経由のサブスクリプションログイン。~/.pi/agent/auth.json（0600）にローカル保存
ベンダー：earendil-works（オープンソースコミュニティプロジェクト）
ライセンス：MIT、オープンソース
デザイン作業において際立った特性は、Piがプロバイダー非依存であることです。Anthropic、OpenAI、Google、その他多くのプロバイダーを1つの統一APIの背後で正規化するため、自分のキーを持ち込み、タスクごとにモデルを選択できます — 例えば、参照スクリーンショットを読むための強力なマルチモーダルモデル — そしてワークフローを変えずにセッション中に/modelまたはCtrl+Lで切り替えられます。
あらゆるモデル、自分のキー：PiはAnthropicやOpenAIを含む20以上のプロバイダーにルーティングします。自分のAPIキー（BYOK）で認証するか、/loginでClaude Pro/Max、ChatGPT Plus/Pro、GitHub Copilotのサブスクリプションにサインインします。
Skills + Extensions：PiはSkills（Agent Skills標準に従うMarkdown機能パッケージ）とTypeScript Extensionsを読み込みます — デザイン規約をエンコードし、カスタムツールを追加する自然な場所です。
分岐セッション：セッションはJSONLツリーとして保存されるため、探索を分岐し、単一ファイル内で履歴をナビゲートでき、以前のパスを失いません。
認証情報：自分のプロバイダーAPIキー（BYOK — Anthropic、OpenAI、Googleなど）または/login経由のサブスクリプションログイン。~/.pi/agent/auth.json（0600）にローカル保存
ベンダー：earendil-works（オープンソースコミュニティプロジェクト）
ライセンス：MIT、オープンソース
なぜマルチプロバイダーのBYOKエージェントがデザインに適合するのか
Piのデザイン上の強みは柔軟性であり、単一の組み込みモデルではない — しかし、どのエージェントもそうであるように、センスは依然として与えられなければならない。
タスクごとに適切なモデルを選ぶ：Piはあらゆるプロバイダーにルーティングするため、参照スクリーンショットを読むために強力なマルチモーダルモデルを利用し、その後リファクタリング用に別のモデルに切り替えることができます — エージェントを離れることなく。
自分のキー、ロックインなし：BYOKとは、1つのベンダーの価格設定やコンテキスト制限に縛られないことを意味します。目の前のデザイン作業に合った強みを持つモデルを選んでください。
Skillsにおける規約：スキル（およびFigmaサーバーのようなMCPソース）は、エージェントをあなたのトークン、コンポーネント、実際の仕様に向けるため、デフォルトの見た目ではなくブランドに沿って動作します。
センスは、あなたが提供する3つの入力から生まれます：デザインシステム、スキル、実際の参照画像。
教訓はどのエージェントも教えるのと同じです：Piはデフォルトではセンスを持たず、どのモデルを選んでもそれは得られません。制約を与えると良いデザインを生み出します — デザインシステム、美的スキル、具体的な参照。OpenDesignはまさにそれらの入力をパッケージ化しており、だからこそ両者は相性が良いのです（詳細は後述）。
タスクごとに適切なモデルを選ぶ：Piはあらゆるプロバイダーにルーティングするため、参照スクリーンショットを読むために強力なマルチモーダルモデルを利用し、その後リファクタリング用に別のモデルに切り替えることができます — エージェントを離れることなく。
自分のキー、ロックインなし：BYOKとは、1つのベンダーの価格設定やコンテキスト制限に縛られないことを意味します。目の前のデザイン作業に合った強みを持つモデルを選んでください。
Skillsにおける規約：スキル（およびFigmaサーバーのようなMCPソース）は、エージェントをあなたのトークン、コンポーネント、実際の仕様に向けるため、デフォルトの見た目ではなくブランドに沿って動作します。
センスは、あなたが提供する3つの入力から生まれます：デザインシステム、スキル、実際の参照画像。
教訓はどのエージェントも教えるのと同じです：Piはデフォルトではセンスを持たず、どのモデルを選んでもそれは得られません。制約を与えると良いデザインを生み出します — デザインシステム、美的スキル、具体的な参照。OpenDesignはまさにそれらの入力をパッケージ化しており、だからこそ両者は相性が良いのです（詳細は後述）。
デザイン作業のためにPiをゼロからセットアップする
セットアップ手順: インストール → 認証（BYOK）→ Skill にデザインルールを記述 → モデルを選択 → ブラウザ検証を有効化。
デザインルールを記述する: トークン、プリミティブ、規約を Skill に入れ、Pi にそれらを指定すると、出力が汎用的な見た目に既定化されるのではなくブランドに合致します。
ブラウザ検証を追加する: Playwright またはブラウザ MCP を接続し、Pi が実ブラウザでレンダリングして、ビルドが通ることだけを確認するのではなく、ブレークポイント全体で出力をチェックできるようにします。
コマンドとバージョン固有の詳細には現行のセットアップセクションを使用してください。これらは変更される可能性があります。
前のガイドの履歴コマンド例。現在の構文はリンク先のベンダードキュメントで確認してください。
デザインルールを記述する: トークン、プリミティブ、規約を Skill に入れ、Pi にそれらを指定すると、出力が汎用的な見た目に既定化されるのではなくブランドに合致します。
ブラウザ検証を追加する: Playwright またはブラウザ MCP を接続し、Pi が実ブラウザでレンダリングして、ビルドが通ることだけを確認するのではなく、ブレークポイント全体で出力をチェックできるようにします。
コマンドとバージョン固有の詳細には現行のセットアップセクションを使用してください。これらは変更される可能性があります。
# 1. Install the Pi coding agent CLI (Node)
npm install -g --ignore-scripts @earendil-works/pi-coding-agent
# 2. Authenticate with your own provider key (BYOK)
export ANTHROPIC_API_KEY=sk-ant-... # or OPENAI_API_KEY=sk-...
# (or run /login inside Pi for a Claude / ChatGPT / Copilot subscription)
# 3. Start it in your project
cd your-project
pi
# 4. Switch models any time with /model or Ctrl+L前のガイドの履歴コマンド例。現在の構文はリンク先のベンダードキュメントで確認してください。
スクリーンショットから UI へのワークフロー
Pi を使った最も効果の高いデザインループは、参照画像を動作するレスポンシブ UI に変え、一致するまで反復することです — マルチモーダルモデルを活用して、出力を参照画像と比較しながら行います。Pi はプロバイダー非依存なので、このパスでは画像を最もよく読み取るモデルを指定してください。
手元にある最も明確なビジュアル参照から始め、単なるヒーローショット 1 枚だけではなく、複数の状態（デスクトップとモバイル、ホバー、空状態、読み込み中）を含めてください。
/model でこのパスに強力なマルチモーダルモデルを選んでください。画像理解がスクリーンショットから UI への品質を左右するからです。
プロンプトでは具体的に指定してください。曖昧なプロンプトは、強力なモデルでも汎用的な UI を生みます。
デザインシステムと規約を Skill に保ち、トークンと正規のプリミティブがどこにあるかを Pi に伝えてください。
開発サーバーを起動し、Pi に実ブラウザでレンダリングさせ、ブレークポイントに合わせてリサイズし、その実装をスクリーンショットと比較して反復してください — 単にビルドが通ることを確認するだけではありません。
エージェントには、参照と具体的な制約を事前に与えてください:
プロンプトは小さく焦点を絞り、良い反復はコミットし、悪い反復はリバートしてください（リバートするときは Pi に伝えます）。そうすれば各パスがクリーンなベースの上に積み重なります。Pi の分岐する JSONL セッションを使えば、元のスレッドを失わずに別案を探索することもできます。
前のガイドの履歴コマンド例。現在の構文はリンク先のベンダードキュメントで確認してください。
手元にある最も明確なビジュアル参照から始め、単なるヒーローショット 1 枚だけではなく、複数の状態（デスクトップとモバイル、ホバー、空状態、読み込み中）を含めてください。
/model でこのパスに強力なマルチモーダルモデルを選んでください。画像理解がスクリーンショットから UI への品質を左右するからです。
プロンプトでは具体的に指定してください。曖昧なプロンプトは、強力なモデルでも汎用的な UI を生みます。
デザインシステムと規約を Skill に保ち、トークンと正規のプリミティブがどこにあるかを Pi に伝えてください。
開発サーバーを起動し、Pi に実ブラウザでレンダリングさせ、ブレークポイントに合わせてリサイズし、その実装をスクリーンショットと比較して反復してください — 単にビルドが通ることを確認するだけではありません。
エージェントには、参照と具体的な制約を事前に与えてください:
プロンプトは小さく焦点を絞り、良い反復はコミットし、悪い反復はリバートしてください（リバートするときは Pi に伝えます）。そうすれば各パスがクリーンなベースの上に積み重なります。Pi の分岐する JSONL セッションを使えば、元のスレッドを失わずに別案を探索することもできます。
pi
# in the prompt:
> Implement reference-desktop.png and reference-mobile.png in
React + Vite + Tailwind + TypeScript.
Reuse my existing design-system components and tokens (see the Skill).
Match spacing, layout, and hierarchy; make it responsive.
Render it in the browser and iterate until it matches the references
across breakpoints.前のガイドの履歴コマンド例。現在の構文はリンク先のベンダードキュメントで確認してください。
スキル、拡張機能、テーマ
Piは実行時にいくつかのレイヤーを介して自己拡張し、それらはオープンなデザインワークフローにきれいに対応します。
スキル: Agent Skills標準に従ったMarkdown機能パッケージ — デザイン規約、トークン、レビューチェックリストのための永続的でポータブルな拠点です。同じスキルはPiだけでなく、互換性のあるエージェント間で機能します。
拡張機能とプロンプトテンプレート: TypeScript拡張機能はカスタムツール、コマンド、UIを追加します。再利用可能なプロンプトテンプレートは/nameで実行されます。どちらもターミナルを離れることなく検証ループをスクリプト化できます。
MCPとテーマ: PiはMCPサーバーに接続して外部のデザインコンテキスト（最も関連性が高いのはFigma MCPサーバー）を取り込み、テーマはホットリロードされるため、作業中もターミナルUIが読みやすく保たれます。
これらはポータブルな機能です — 特にスキルとMCPは — まさにOpenDesignがプロジェクトごとに再作成するのではなく、オーケストレーションするために作られたものです。
スキル: Agent Skills標準に従ったMarkdown機能パッケージ — デザイン規約、トークン、レビューチェックリストのための永続的でポータブルな拠点です。同じスキルはPiだけでなく、互換性のあるエージェント間で機能します。
拡張機能とプロンプトテンプレート: TypeScript拡張機能はカスタムツール、コマンド、UIを追加します。再利用可能なプロンプトテンプレートは/nameで実行されます。どちらもターミナルを離れることなく検証ループをスクリプト化できます。
MCPとテーマ: PiはMCPサーバーに接続して外部のデザインコンテキスト（最も関連性が高いのはFigma MCPサーバー）を取り込み、テーマはホットリロードされるため、作業中もターミナルUIが読みやすく保たれます。
これらはポータブルな機能です — 特にスキルとMCPは — まさにOpenDesignがプロジェクトごとに再作成するのではなく、オーケストレーションするために作られたものです。
デザインのためのPi vs Codex vs Claude Code vs Cursor vs Gemini CLI
デザイン作業に単一の勝者はいません — 各エージェントには異なる強みがあり、経験豊富なチームはそれらを積み重ねて使います。公平な要約:
Pi — プロバイダー非依存でBYOK — 任意のモデル（Anthropic、OpenAI、Google…）にルーティングし、セッション途中で切り替え可能。MIT、自己拡張可能 — ベンダーロックインなしでタスクごとに最適なモデルを選択
Codex — フロントエンドスキルによる強力なビジュアルポリッシュ; サンドボックス化された非同期ビルド — 委任された非同期ビルドとポータブルなAGENTS.mdルール
Claude Code — 具体的なデザイン決定（16進数、スペーシング、タイプ）とコードベースを認識するUX — フロントエンドの推論と大規模コンテキストのリファクタリング
Cursor — ライブプレビューとインライン編集によるビジュアルなビルドアンドシーループ — IDE内でのタイトな反復と監視のUI作業
Gemini CLI — 強力なマルチモーダル画像理解と1Mトークンのコンテキスト; 無料枠 — スクリーンショットの多い作業とデザインシステム全体をコンテキストに保持
Piの角度は他とは直交しています。それは、それらの基盤モデルのいずれかを自分のキーで使用できるようにするエージェントです。繰り返されるコミュニティの評決は依然として有効です — センスは人間から来ます。それらはすべて、スキル、参照、制約がなければ一般的な美学にデフォルトします。それが解決すべき本当の問題であり、それはモデル形ではなく、デザインツール形です。
エージェント — デザインの強み — 最適な用途
Pi — プロバイダー非依存でBYOK — 任意のモデル（Anthropic、OpenAI、Google…）にルーティングし、セッション途中で切り替え可能。MIT、自己拡張可能 — ベンダーロックインなしでタスクごとに最適なモデルを選択
Codex — フロントエンドスキルによる強力なビジュアルポリッシュ; サンドボックス化された非同期ビルド — 委任された非同期ビルドとポータブルなAGENTS.mdルール
Claude Code — 具体的なデザイン決定（16進数、スペーシング、タイプ）とコードベースを認識するUX — フロントエンドの推論と大規模コンテキストのリファクタリング
Cursor — ライブプレビューとインライン編集によるビジュアルなビルドアンドシーループ — IDE内でのタイトな反復と監視のUI作業
Gemini CLI — 強力なマルチモーダル画像理解と1Mトークンのコンテキスト; 無料枠 — スクリーンショットの多い作業とデザインシステム全体をコンテキストに保持
Piの角度は他とは直交しています。それは、それらの基盤モデルのいずれかを自分のキーで使用できるようにするエージェントです。繰り返されるコミュニティの評決は依然として有効です — センスは人間から来ます。それらはすべて、スキル、参照、制約がなければ一般的な美学にデフォルトします。それが解決すべき本当の問題であり、それはモデル形ではなく、デザインツール形です。
エージェント — デザインの強み — 最適な用途
落とし穴と、「AIスロップ」な見た目を避ける方法
AIが生成したデザインに関する最も一般的な不満は、それがありきたりに見えることです — 柔らかなグラデーション、浮遊するパネル、大きすぎる角丸、劇的な影、そして「これはAIが作った」と叫んでいるようなInterとパープルの雰囲気です。他に報告されている問題には、モバイルレイアウトの崩れや、指示がUIコピーに漏れ出すことが含まれます。これらはいずれもPiや特定のモデルに固有のものではありません。これらは、キュレーションされたデザインコンテキストなしでエージェントが実行されたときに起こることです。
美的スキルを追加する：キュレーションされたデザインスキルは、エージェントにデフォルトの見た目ではなく、本当の方向性にコミットすることを強制します — そして、それはポータブルなスキルなので、モデルをまたいであなたと一緒に移動します。
実際のブラウザで検証する：マルチモーダルモデルを選び、Piにブレークポイント全体でレンダリングと自己チェックを行わせ、モバイルでレイアウトがサイレントに崩れないようにします。
トークンとリファレンスを提供する：実際のデザイントークンと参考スクリーンショットは、出力品質に対する単一最大のレバーです。
Piが読む場所にルールをエンコードする：エージェントが毎回の実行で読み込むスキルに、「ヒーローカードなし、書体は最大2つ、ブランド第一の階層」といったスタイルルールを入れます。
すべての緩和策は、エージェントにキュレーションされたデザインコンテキストを与えることに関するものであることに注意してください — どのプロバイダーにルーティングするかとは無関係です。そのコンテキストをプロジェクトごとに手作業で維持することは、OpenDesignが取り除く面倒な作業です。
美的スキルを追加する：キュレーションされたデザインスキルは、エージェントにデフォルトの見た目ではなく、本当の方向性にコミットすることを強制します — そして、それはポータブルなスキルなので、モデルをまたいであなたと一緒に移動します。
実際のブラウザで検証する：マルチモーダルモデルを選び、Piにブレークポイント全体でレンダリングと自己チェックを行わせ、モバイルでレイアウトがサイレントに崩れないようにします。
トークンとリファレンスを提供する：実際のデザイントークンと参考スクリーンショットは、出力品質に対する単一最大のレバーです。
Piが読む場所にルールをエンコードする：エージェントが毎回の実行で読み込むスキルに、「ヒーローカードなし、書体は最大2つ、ブランド第一の階層」といったスタイルルールを入れます。
すべての緩和策は、エージェントにキュレーションされたデザインコンテキストを与えることに関するものであることに注意してください — どのプロバイダーにルーティングするかとは無関係です。そのコンテキストをプロジェクトごとに手作業で維持することは、OpenDesignが取り除く面倒な作業です。
OpenDesign内でPiを使ってデザインする
OpenDesignは、上記のワークフローが求め続けているオープンソースのデザインレイヤーです。Piをファーストパーティアダプターとして扱い、キュレーションされたスキルとデザインシステムライブラリ、構造化されたレンダーパイプライン、ローカルデスクトップUIでラップします — そのため、Piを優れたものにするデザインコンテキストが最初の実行から存在し、毎回手作業で組み立てる必要はありません。両方ともオープンソースでローカルファーストであるため、この組み合わせは自然な適合となります。
自分のプロバイダーAPIキー（BYOK）またはサブスクリプションログインで認証します — 認証情報は~/.pi/agent/auth.jsonにあるあなたのマシンに留まり、私たちを通じてプロキシされることは決してありません。
デザインシステムとスキルを選び、一貫したテイストでデッキ、プロトタイプ、ランディングページを生成します。
すべての成果物とDESIGN.mdファイルは、ホストされたクラウドではなく、あなた自身のリポジトリに存在します。
同じPiエージェント、同じキー、モデルを切り替える同じ自由 — さらにその周りに本物の、ポータブルで、オープンソースのデザインワークフローがあります。それはローカルファーストでMITなので、あなたの作業や認証情報について何もあなたのマシンから離れません。
OpenDesignをインストールし、エージェントとしてPiを選択します。
自分のプロバイダーAPIキー（BYOK）またはサブスクリプションログインで認証します — 認証情報は~/.pi/agent/auth.jsonにあるあなたのマシンに留まり、私たちを通じてプロキシされることは決してありません。
デザインシステムとスキルを選び、一貫したテイストでデッキ、プロトタイプ、ランディングページを生成します。
すべての成果物とDESIGN.mdファイルは、ホストされたクラウドではなく、あなた自身のリポジトリに存在します。
同じPiエージェント、同じキー、モデルを切り替える同じ自由 — さらにその周りに本物の、ポータブルで、オープンソースのデザインワークフローがあります。それはローカルファーストでMITなので、あなたの作業や認証情報について何もあなたのマシンから離れません。
OpenDesignをインストールし、エージェントとしてPiを選択します。
OpenDesignはPiと提携していますか？
いいえ。OpenDesignは独立しており、コミュニティでサポートされているアダプターとしてPiを統合しています。