デザインのための Aider。

Aider とは実際に何か

Aider はターミナルで動くオープンソース（Apache-2.0）の AI ペアプログラミングツールです。既存のコードベースを読み、リポジトリ全体をコンテキストとしてマッピングし、ファイルをその場で編集し、各変更を妥当なメッセージで自動コミットします。だから、すでに使い慣れた git ツールで AI の作業を差分表示・管理・取り消しできます。100 以上のプログラミング言語に対応し、新規プロジェクトの開始も既存プロジェクトの拡張もできます。

デザイン作業では二つの性質が際立ちます。Aider はモデル非依存です。自分のキーを持ち込み、ほぼあらゆる LLM（Claude、GPT-4o、DeepSeek、Gemini、ローカルモデル）に接続できるので、単一プロバイダに縛られません。そして GPT-4o や Claude のようなビジョン対応モデルでは画像ファイルを読めるため、参照スクリーンショットがプロンプトの一部になります。

• 規約ファイル: Aider は /read CONVENTIONS.md（または aider --read CONVENTIONS.md）で読み込む CONVENTIONS.md ファイルを読みます。デザイン規約・トークン・レビューチェックリストを読み取り専用のコンテキストとして記述するのに自然な場です。
• git ネイティブな編集: すべての変更はリポジトリ内のファイルに適用され自動コミットされるため、各デザイン反復は使い慣れた git ツールでレビューでき、取り消せます。
• 自分のモデルを持ち込む: 自分の API キーで OpenAI、Anthropic、DeepSeek、Gemini、ローカルモデルを接続します。Aider は単一ベンダーやホスト型バックエンドに縛られません。

• ベンダー：Aider（Aider-AI、オープンソース）— モデル非依存
• 認証情報：自分のプロバイダ API キー — BYOK（OpenAI、Anthropic、DeepSeek、Gemini、またはローカルモデル）
• ライセンス：Apache-2.0、オープンソース

なぜモデル非依存で git ネイティブなツールがデザインに適するのか

Aider のデザイン上の強みは、リポジトリとあなたが選ぶモデルにどう向き合うかから来ます。ただし、どのエージェントも同じく、センスは人が与える必要があります。

• モデル非依存、BYOK: タスクと予算に最も合うモデル（Claude、GPT-4o、DeepSeek、Gemini）を選び、ワークフローを変えずに自由に切り替えられます。すべて自分のキーで。
• git ネイティブな反復: 自動コミットにより、各デザインパスは取り消せるレビュー可能な差分になります。追跡されていない編集の山ではなく、クリーンな土台に対して反復できます。
• 規約は CONVENTIONS.md に: CONVENTIONS.md（読み取り専用で読み込む）はエージェントをあなたのトークン・コンポーネント・ルールへ指し示すので、既定の見た目ではなくブランドに沿って作業します。

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

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

まっさらなマシンから、UI を構築・検証できる Aider までの全行程を示します。

# 1. Install Aider (recommended installer; Python 3.8–3.13)
python -m pip install aider-install
aider-install
# or with pipx: pipx install aider-chat

# 2. Start it in your git project and bring your own key
cd your-project
aider --model sonnet --api-key anthropic=<your-key>
# or: aider --api-key openai=<your-key>   (also deepseek=, gemini=)

# 3. Load your design conventions as read-only context
aider --read CONVENTIONS.md

# 4. Add a reference image (on a vision-capable model)
#    inside the chat: /add reference-desktop.png

• デザインルールを記述する: トークン・プリミティブ・規約を CONVENTIONS.md に置き、読み取り専用で読み込みます。すると出力は無個性な見た目に流れず、ブランドに合致します。
• ブラウザ検証を加える: 開発サーバを起動し、Aider に実際のブラウザで描画させます。ビルドが通ったことだけを確認するのではなく、各ブレークポイントで出力を点検させます。

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

Aider で最も効果の高いデザインループは、参照画像を動作するレスポンシブな UI に変え、一致するまで反復することです。ビジョン対応モデルを使って出力を参照と照らし合わせ、各パスを git にコミットします。

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

ビジョン対応モデルで /add（またはクリップボードからの /paste）で画像を追加し、具体的な制約を与えます：

aider --model gpt-4o --read CONVENTIONS.md
# in the chat:
> /add reference-desktop.png
> /add reference-mobile.png
> Implement this design in React + Vite + Tailwind + TypeScript.
  Reuse my existing design-system components and tokens from CONVENTIONS.md.
  Match spacing, layout, and hierarchy; make it responsive.
  I'll render it in the browser and tell you what to fix until it matches
  the references across breakpoints.

プロンプトは小さく焦点を絞ります。Aider は各変更をコミットするので、良い反復は残し、悪い反復は git（または /undo）で元に戻せます。こうして各パスがクリーンな土台の上に積み重なります。

CONVENTIONS.md・画像・コマンド

三つの機能が Aider を継続的なデザイン作業に実用的にし、いずれもオープンなデザインワークフローにきれいに対応します。

• CONVENTIONS.md コンテキスト: コーディングとデザインの規約を /read CONVENTIONS.md または aider --read CONVENTIONS.md で読み込むか、.aider.conf.yml に read: CONVENTIONS.md を設定して毎回読み込みます。トークン・プリミティブ・ルールの永続的な置き場です。
• 画像と Web ページ: ビジョン対応モデルでは、画像ファイルを /add するかクリップボードから /paste して Aider に本物の参照を与えます。/web <url> はページのテキストをチャットに取り込み、追加のコンテキストにします。
• チャット内コマンド: ファイルをコンテキストに取り込む /add、読み取り専用参照の /read、直前のコミットを取り消す /undo といったコマンドで、ターミナルを離れずに参照を集め検証ループを回せます。

これらは可搬でリポジトリネイティブな機能であり、プロジェクトごとに作り直すのではなく、まさに Open Design がオーケストレーションするために作られた類のものです。

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

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

コミュニティで繰り返し語られる結論は、センスは人から来るということです。どれもスキル・参照・制約がなければ無個性な美的傾向に流れます。それこそが解くべき本当の問題であり、モデルの形ではなくデザインツールの形をした問題です。

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

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

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

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

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

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

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

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

よくある質問

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

   はい。美的スキル、デザインシステム、本物の参照画像がコンテキストにあれば、Aider は本番品質のレスポンシブな UI を生み出します。ビジョン対応モデルではスクリーンショットを読んで出力を参照と照合します。そのコンテキストがないと無個性な見た目に流れがちで、それこそ Open Design が埋めるギャップです。

2. 02 デザインに Aider と組み合わせられるモデルは？ +

   Aider はモデル非依存です。自分の API キーを持ち込み、ほぼあらゆる LLM（Claude、GPT-4o、DeepSeek、Gemini、ローカルモデル）に接続できます。画像ベースのデザイン作業には GPT-4o や Claude のようなビジョン対応モデルを使ってください。Open Design があなたの認証情報をプロキシすることはありません。

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

   二つあります。モデル非依存なので、タスクに最もよくデザインするモデルを選べること。そして git ネイティブで、各変更をコミットするので各デザイン反復がレビューでき取り消せること。どちらも役立ちますが、センスはあなたが供給するデザインシステム・スキル・参照から来ます。

4. 04 Aider は私のファイルを編集し git にコミットしますか？ +

   はい。Aider はリポジトリ内のファイルを直接編集し、各変更を妥当なメッセージで自動コミットします。だから、すでに使い慣れた git ツールで AI の作業を差分表示・管理・取り消しできます。

5. 05 Aider に自分のデザイン規約をどう与えますか？ +

   トークン・プリミティブ・ルールを記した CONVENTIONS.md を作り、/read CONVENTIONS.md または aider --read CONVENTIONS.md で読み取り専用として読み込みます（.aider.conf.yml に read: CONVENTIONS.md を設定して毎回読み込むこともできます）。すると Aider は既定の見た目ではなくあなたのブランドに沿って作業します。

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

   いいえ。Aider は独立したオープンソースプロジェクト（Aider-AI）です。Open Design は別の独立したオープンソースプロジェクトで、Aider をファーストパーティのアダプタとしてサポートします。両者に提携関係はありません。

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

   はい。Open Design はローカルファーストでオープンソースです。ファイル・成果物・DESIGN.md は自分の git リポジトリに留まり、プロバイダ API キーはあなたのエージェントが直接使い、Open Design のサーバを経由することは決してありません。