参考リンク
Piに関する参考資料
公開されているガイドに掲載されている、Piでデザインするためのチュートリアル、ドキュメント、ウォークスルーです。
Pi 
OpenDesign OpenDesign で
Pi と
デザインする。
OpenDesignでPiを使ってインターフェースをデザインする方法について説明します。ポータブルなスキル、選択するモデルとキー、ブリーフからレビュー済みファイルまでの1つのプラン比較タスク、そして始める前に知っておくべき制限を取り上げます。
ブリーフからインターフェースへ01 / Pi
アイデアを持ち込むのはあなたです↗
“1つの持ち運び可能なスキル
で行うプラン比較、モデルは問わない。”
1つの完全なPiデザインタスク
Piのデザインタスク：ブリーフからインターフェースまで
1つのタスクを、最初から最後まで示します。渡すブリーフと制約、返ってくる成果物、そして完了までに実行すべき確認事項です。以下のインターフェースは、このページのために作成された説明用の例であり、記録されたPiの実行結果ではありません。
1設計ブリーフと制約条件
ブリーフメモアプリのプラン比較ページをデザインしてください：無料プラン、個人プラン、チームプランの比較、機能比較表、短いFAQです。デスクトップとスマートフォン対応。
- デザインシステムOpenDesignのペーパーキャンバス：Albert Sans、グリーンのアクセント1色
- ブレークポイント1440pxデスクトップと390pxモバイル、横スクロールなし
- インタラクション請求切り替えトグル、プランCTA、比較行の展開
- 出力安定した
data-od-idフックを持つ、自己完結型のHTMLファイル1つ
2作業分担：あなた、Pi、OpenDesign
- あなた
ブリーフを作成し、デザインシステムを選択し、受け入れ基準を定義します。
- Pi
レイアウトを計画し、HTML、CSS、JavaScriptを書き、要求に応じて修正します。
- OpenDesign
デザインシステムとスキルを提供し、プレビューをレンダリングし、すべてのバージョンをプロジェクト内のファイルとして保存します。
- レビュー
ビジュアルの階層構造、8pxグリッドに基づく間隔、両方のブレークポイント、そしてすべてのインタラクションが、引き渡し前にチェックされます。
3Piの成果物：1440pxと390pxにおけるプランの比較ページ
4ハンドオフ前のレビュー
レイアウト
グリッドとスペーシング
3つのプランと比較表は8pxグリッドを共有しており、機能の行は列をまたいで揃っています。
階層
視覚的階層
価格とプラン名を最優先に表示し、アクセントカラーが最も選ばれているバッジとそのボタンを示します。
レスポンシブ
モバイルレイアウト
個人プランを最初に、次に無料プラン、最後にチームプランを表示します。トグルは上部に固定されます。
インタラクション
インタラクションの確認
トグルを切り替え、Tabキーで各CTAを移動し、比較行を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 コーディングエージェントです。read、write、edit、bash という4つの小さなツールを核として、コードベースを読み取り、ファイルを編集し、コマンドを実行します。このページでは 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回の修正を含む小さなブリーフを使用してください。
スターターブリーフプロフィールフォームと保存確認を備えた設定画面を作成してください。私のデザインルールを使用し、デスクトップとモバイルの幅で確認してください。
チェックポイント結果を開き、保存状態をテストして、具体的な変更を一つ依頼してください。生成されたファイルはレビューの始まりであり、終わりではありません。
ソースから OpenDesign を実行するには、代わりに技術クイックスタートをご覧ください。
Pi のデザインワークフロー
Pi のデザインワークフロー：5つのステップ
同じプラン比較ページの課題を、ブリーフから検証済みファイルまで追跡します。各ステップでは、あなたが提供するもの、Piが行うこと、OpenDesignが提供するもの、そしてあなたが確認する内容を示しています。
- 1
デザインブリーフ
平易な言葉で3〜6行。対象ユーザー、画面の役割、対象プラットフォームを明記します。
- あなたブリーフを書きます。参考となるスクリーンショットがあれば添付します。
- Piブリーフとプロジェクトの指示ファイルを読み取り、不明な点があれば質問します。
- OpenDesignプロジェクト、プロンプトサーフェス、成果物の種類に応じたスキルを提供します。
- 確認ブリーフに受け入れ基準が記載されていることを確認します。生成後よりも今のうちに追加する方がコストを抑えられます。
- 2
デザイン制約
デザインシステムと少数の厳格なルールです。これがブランドに沿った出力と、ありふれた見た目とを分ける要因になります。
- あなたデザインシステムを選び、ブレークポイントと必須のコンポーネントを指定します。
- Pi1行書く前に、DESIGN.mdのトークンと姿勢ルールをコンテキストに読み込みます。
- OpenDesignデザインシステムライブラリを提供し、選択したものをスキルテンプレートに紐付けます。
- 確認トークンがブランドに合っているかを確認します。アクセントカラーは1色、フォントと角丸の値が適切であることを確かめます。
- 3
インターフェースを生成する
Piは、レイアウト、スタイル、インタラクション、安定したフックを含む自己完結型のHTMLファイルを作成します。
- あなた待つか、確認の質問に答えます。設定することは何もありません。
- Piセクションを計画し、HTML、CSS、JavaScriptを記述し、ファイルを実行して、失敗した箇所を修正します。
- OpenDesign成果物をプロジェクトフォルダに保存し、プレビュー用にインデックスを作成します。
- 確認ここではまだ何もありません。ファイルはソースではなく、レンダリングされた状態で評価します。
- 4
プレビュー
ファイルは、指定した幅で OpenDesign 内にレンダリングされます。ここでデザインが判断されます。
- あなた幅を切り替え、インタラクションをクリックして試し、要素にコメントを残します。
- Piプレビューへのコメントを読み取り、次の改訂を準備します。
- OpenDesignプレビューをレンダリングし、コメントや編集用に
data-od-idターゲットを公開します。 - チェック階層構造、コントラスト、390px でのオーバーフロー、フォーカス状態、そしてアクセントカラーが控えめに使われているかを確認します。
- 5
修正と検証
プレビュー内の要素を指し示して変更を依頼します。修正はすべて新しいファイルとして作成され、既存のものが黙って上書きされることはありません。
- あなたコメントを依頼に変換し、タスクが完了したかどうかを判断します。
- Pi変更をその場に適用し、ファイルを再実行します。
- OpenDesignバージョンを並べて保持し、完了時に画像または HTML をエクスポートします。
- チェック変更された部分のみを再確認した後、各ブレークポイントでページ全体を一度確認します。
リソース
Piのデザインリソース
制限事項
Piの制限事項、手動チェック、フォールバック
- スコープPiはプロバイダーに依存しません。Anthropic、OpenAI、Google、その他20以上のプロバイダーを統一的に扱うため、ご自身のキーを持ち込み、セッションの途中でもモデルを切り替えることができます。このページでは、OpenDesignに接続されたエージェントとしてのPiについて説明しており、Piのすべての機能を網羅するものではありません。
- 使用制限使用制限とコストは、使用する認証情報(ご自身のプロバイダーAPIキー、または/loginによるサブスクリプションログイン)によって決まります。このページは無料枠について何も保証するものではありません。
- ネットワークローカルのプロジェクトファイルであっても、推論がオフラインで行われるとは限りません。機密性のある入力を共有する前に、エージェントのプロバイダー設定とデータポリシーを確認してください。
- 出力は HTML です成果物は HTML ファイルであり、ベクター形式のデザインファイルではありません。
- 手動レビューアクセシビリティ、実際のコンテンツ、ブランドとの整合性、インタラクションの正しさは、プレビューであなたが確認します。エージェントによる自己チェックは、あくまで一次チェックとして扱ってください。
- フォールバックエージェントが利用できない場合やタスクが失敗した場合は、インストールされているバージョンの接続手順と認証を確認してください。設定を変更する前に、エラーと最後に成功した成果物を保存しておいてください。
よくある質問
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で最初のデザインタスクを開始する
まずは小さなタスクから始めて往復のやり取りを確認し、その後に本番のブリーフを持ち込んでください。ご自身の環境に合ったオプションを選択してください。このページは環境を自動検出しません。