デザインのための Pi。

Pi とは実際に何か

Pi はターミナル向けのオープンソース（MIT）AI コーディングエージェントで、earendil-works の pi ツールキットの一部です。リポジトリを読み、ファイルを編集し、シェルコマンドを実行し、単に行を補完するのではなく自然言語のタスクから作業を計画・検証します。その核はあえて小さく保たれています — 既定のツールは read、write、edit、bash の四つ、加えて組み込みの grep、find、ls です。

デザイン作業で際立つ性質は、Pi がプロバイダ非依存であることです。Anthropic、OpenAI、Google ほか多くのプロバイダを一つの統一 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 ツリーとして保存されるので、探索を分岐させ、以前のパスを失わずに一つのファイル内で履歴をたどれます。

• ベンダー：earendil-works（オープンソースのコミュニティプロジェクト）
• 認証情報：自分のプロバイダ API キー（BYOK — Anthropic、OpenAI、Google ほか）または /login によるサブスクリプションログイン。~/.pi/agent/auth.json（0600）にローカル保存
• ライセンス：MIT、オープンソース

なぜマルチプロバイダな BYOK エージェントがデザインに適するのか

Pi のデザイン上の強みは、単一の組み込みモデルではなく柔軟性です。ただし、どのエージェントも同じく、センスは人が与える必要があります。

• タスクごとに最適なモデルを選ぶ: Pi はあらゆるプロバイダにルーティングするので、参照スクリーンショットを読むための強力なマルチモーダルモデルに手を伸ばし、リファクタリングには別のモデルに切り替えられます — エージェントを離れずに。
• 自分のキー、ロックインなし: BYOK は単一ベンダーの価格やコンテキスト上限に縛られないことを意味します。目の前のデザイン作業に強みが合うモデルを選べます。
• 規約は Skills に: Skill（加えて Figma サーバのような MCP ソース）がエージェントをあなたのトークン・コンポーネント・実際の仕様へ指し示すので、既定の見た目ではなくブランドに沿って作業します。

教訓はどのエージェントも教えてくれるものと同じです。Pi は既定でセンスを持たず、どんなモデル選択もそれを供給しません。制約 — デザインシステム、美的スキル、具体的な参照 — を与えたときに良いデザインを生み出します。Open Design はまさにそれらの入力をパッケージ化します。だからこそ両者は噛み合います（詳細は後述）。

デザイン作業向けに Pi をゼロからセットアップする

まっさらなマシンから、UI を構築・検証できる 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

• デザインルールを記述する: トークン・プリミティブ・規約を Skill に入れ、Pi に指し示します。すると出力は無個性な見た目に流れず、ブランドに合致します。
• ブラウザ検証を加える: Playwright かブラウザ MCP を接続し、Pi に実際のブラウザで描画させ各ブレークポイントで出力を点検させます。ビルドが通ったことだけを確認するのではなく。

スクリーンショットから UI へのワークフロー

Pi で最も効果の高いデザインループは、参照画像を動作するレスポンシブな UI に変え、一致するまで反復することです。マルチモーダルモデルを頼りに出力を参照と照らし合わせます。Pi はプロバイダ非依存なので、このパスで画像を最もよく読めるモデルを指定します。

1. 手持ちで最も明瞭な視覚的参照から始め、ヒーロー画像 1 枚だけでなく複数の状態（デスクトップとモバイル、ホバー、空、ロード中）を含めます。
2. そのパスには /model で強力なマルチモーダルモデルを選びます。スクリーンショットから UI への品質を左右するのは画像理解だからです。
3. プロンプトは具体的に。曖昧なプロンプトは、強力なモデルでも無個性な UI を生みます。
4. デザインシステムと規約を Skill に保ち、トークンと正規のプリミティブの場所を Pi に伝えます。
5. 開発サーバを起動し、Pi に実際のブラウザで描画させ、ブレークポイントまでリサイズして、実装をスクリーンショットと照らし合わせて反復します。単にビルドが通ることを確認するのではなく。

参照と具体的な制約を、最初にエージェントに与えます：

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 に伝えます）。こうして各パスがクリーンな土台の上に積み重なります。Pi の分岐する JSONL セッションは、元のスレッドを失わずに別案を探ることも可能にします。

Skills・Extensions・テーマ

Pi はいくつかの層を通じて実行時に自己拡張し、それらはオープンなデザインワークフローにきれいに対応します。

• Skills: Agent Skills 標準に従う Markdown の機能パッケージ — デザイン規約・トークン・レビューチェックリストの耐久性ある可搬な置き場です。同じ Skill は Pi だけでなく互換のエージェントをまたいで機能します。
• Extensions とプロンプトテンプレート: TypeScript の Extensions はカスタムツール・コマンド・UI を加えます。再利用可能なプロンプトテンプレートは /name で実行します。どちらもターミナルを離れずに検証ループをスクリプト化できます。
• MCP とテーマ: Pi は MCP サーバに接続して外部のデザインコンテキスト（最も関連が深いのは Figma MCP サーバ）を取り込み、テーマはホットリロードされるので作業中もターミナル UI が読みやすく保たれます。

これらは可搬な機能であり — とりわけ Skills と MCP は — プロジェクトごとに作り直すのではなく、まさに Open Design がオーケストレーションするために作られた類のものです。

デザインにおける Pi 対 Codex 対 Claude Code 対 Cursor 対 Gemini CLI

デザイン作業に唯一の勝者はいません。各エージェントには異なる強みがあり、経験豊富なチームはそれらを重ねて使います。公平にまとめると：

Pi の切り口は他とは直交しています。これらの基盤モデルのいずれをも自分のキーで使えるようにするエージェントなのです。それでもコミュニティで繰り返し語られる結論は変わりません — センスは人から来ます。どれもスキル・参照・制約がなければ無個性な美的傾向に流れます。それこそが解くべき本当の問題であり、モデルの形ではなくデザインツールの形をした問題です。

落とし穴と「AI 丸出し」な見た目を避ける方法

AI が生成したデザインへの最も多い不満は、無個性に見えることです。淡いグラデーション、浮遊するパネル、過大に丸めた角、大げさな影、Inter と紫の雰囲気が「AI が作ったと丸わかり」になります。ほかにも、壊れたモバイルレイアウトや指示文が UI コピーに漏れ出すといった問題が報告されています。いずれも Pi 固有でも、どれか一つのモデル固有でもなく、厳選されたデザインコンテキストなしにどのエージェントを走らせても起こることです。

• 美的スキルを加える: 厳選されたデザインスキルは、既定の見た目ではなく本物の方向性へ踏み込むようエージェントに強制します。しかも可搬な Skill なので、モデルをまたいで一緒に持ち運べます。
• 実際のブラウザで検証する: マルチモーダルモデルを選び、Pi に各ブレークポイントで描画・自己点検させ、モバイルでレイアウトが静かに壊れないようにします。
• トークンと参照を供給する: 本物のデザイントークンと参照スクリーンショットは、出力品質に対する最大の梃子です。
• ルールを Pi が読む場所に記述する: 「ヒーローカード禁止、書体は最大 2 種、ブランド優先の階層」のようなルールを、エージェントが毎回読み込む Skill に入れます。

どの対策も、どのプロバイダにルーティングするかとは独立に、エージェントに厳選されたデザインコンテキストを与えることに帰着する点に注目してください。そのコンテキストをプロジェクトごとに手作業で維持する労苦こそ、Open Design が取り除くものです。

Open Design の中で Pi を使ってデザインする

Open Design は、上記のワークフローが繰り返し求めるオープンソースのデザインレイヤーです。Pi をファーストパーティのアダプタとして扱い、厳選されたスキルとデザインシステムのライブラリ、構造化されたレンダリングパイプライン、ローカルのデスクトップ UI で包みます。こうして Pi を良くするデザインコンテキストが、毎回手作業で組み立てるのではなく初回から備わります。両者ともオープンソースでローカルファーストなので、この組み合わせは自然です。

1. Open Design をインストールし、エージェントとして Pi を選択します。
2. 自分のプロバイダ API キー（BYOK）またはサブスクリプションログインで認証します。認証情報は ~/.pi/agent/auth.json にあなたのマシンで保管され、当方を経由してプロキシされることは決してありません。
3. デザインシステムとスキルを選び、一貫したセンスでデッキ・プロトタイプ・ランディングページを生成します。
4. すべての成果物と DESIGN.md ファイルは、ホスト型クラウドではなく自分のリポジトリに置かれます。

同じ Pi エージェント、同じキー、同じモデル切り替えの自由。そのまわりに本物で可搬なオープンソースのデザインワークフローが加わります。ローカルファーストで MIT なので、作業や認証情報があなたのマシンを離れることはありません。

よくある質問

1. 01 Pi は本当にデザイン作業ができますか？ +

   はい。美的スキル、デザインシステム、本物の参照画像がコンテキストにあれば、Pi は本番品質のレスポンシブな UI を生み出し、強力なマルチモーダルモデルにルーティングして出力を参照と照らして検証できます。そのコンテキストがないと無個性な見た目に流れがちで、それこそ Open Design が埋めるギャップです。

2. 02 Pi でデザインするのに支払いは必要ですか？ +

   Pi 自体は無料でオープンソース（MIT）です。支払うのは基盤モデル分だけ — 自分のプロバイダ API キーを持ち込む（BYOK）か、/login 経由で Claude Pro/Max、ChatGPT Plus/Pro、GitHub Copilot のサブスクリプションを使います。いずれにせよ Open Design があなたの認証情報をプロキシすることはありません。

3. 03 Pi がとりわけデザインに向いている理由は？ +

   プロバイダ非依存だからです。自分のキーを持ち込み 20 以上のプロバイダのいずれにもルーティングでき、タスクに強みが合うモデルを選び、セッションの途中で切り替えられます。ただしセンスはモデルからではなく、あなたが供給するデザインシステム・スキル・参照から来ます。

4. 04 フロントエンドのデザインに Pi でどのモデルを使うべきですか？ +

   Pi は多くのプロバイダにルーティングするので、タスクごとに選びます — 強力なマルチモーダルモデルは参照スクリーンショットをよく読み、別のモデルはリファクタリングに向くかもしれません。Pi の利点は、ワークフローを変えずに切り替えられることです。Open Design なら、どのモデルを選んでも同じデザインコンテキストを保てます。

5. 05 Pi を Figma にどう接続しますか？ +

   Pi は MCP サーバに対応するので、Figma MCP サーバを追加して本物のデザインコンテキスト — コンポーネント、変数、レイアウトデータ — を取り込めます。すると生成コードは近似ではなくソースに合致します。

6. 06 Open Design は Pi と提携していますか？ +

   いいえ。Pi は earendil-works による独立したオープンソースプロジェクトです。Open Design は別の独立したオープンソースプロジェクトで、Pi をファーストパーティのアダプタとしてサポートします。

7. 07 私のファイルと認証情報は安全ですか？ +

   はい。Open Design はローカルファーストでオープンソースです。ファイル・成果物・DESIGN.md は自分のリポジトリに留まり、プロバイダキーは Pi が直接使い（~/.pi/agent/auth.json にローカル保存）、Open Design のサーバを経由することは決してありません。