参考リンク
Aiderに関するさらなる読み物
公開ガイドに記載されているAiderデザインのチュートリアル、ドキュメント、ウォークスルー。
Aider 
OpenDesign OpenDesign で
Aider と
デザインする。
OpenDesignでAiderを使ってインターフェースをデザインする方法：改訂ごとに1コミット、ルールブックとしてのCONVENTIONS.md、ブリーフからレビュー済みファイルまでの変更履歴ページのタスク1件、そして始める前に知っておくべき限界について。
Aiderによる1件の完全なデザインタスク
Aiderのデザインタスク：ブリーフからインターフェースまで
1つのタスクをループ全体を通して追跡：Aiderに渡すブリーフと制約、返ってくるHTML、そして完了前にあなたが実行するチェック。以下のインターフェースはこのページ用の例示であり、記録されたAiderの実行ではありません。
1設計ブリーフと制約条件
ブリーフCLIツール用の変更履歴とリリースノートページをデザインする：バージョンリスト、グループ化された変更を伴うハイライトされたリリース、アップグレードコマンド。各リビジョンはそれぞれ独自のコミットとして残す。デスクトップとスマートフォン。
- デザインシステムOpenDesignのペーパーキャンバス：Albert Sans、グリーンのアクセント1色
- ブレークポイント1440pxデスクトップと390pxモバイル、横スクロールなし
- インタラクションバージョン一覧、アップグレードコマンドのコピー、リリースごとのアンカー
- 出力安定した
data-od-idフックを持つ、自己完結型のHTMLファイル1つ
2誰が何をするか：あなた、Aider、そしてOpenDesign
- あなた
あなたはブリーフを書き、デザインシステムを選び、受け入れ基準を設定する。
- Aider
Aiderはレイアウトを計画し、HTML、CSS、JavaScriptを書き、リクエストに応じて修正する。
- OpenDesign
OpenDesignはデザインシステムとスキルを提供し、プレビューをレンダリングし、各バージョンをプロジェクト内のファイルとして保存する。
- レビュー
あなたはハンドオフ前に、視覚的階層、8pxグリッド上のスペーシング、両方のブレークポイント、そしてすべてのインタラクションを確認する。
3Aider成果物：1440pxと390pxの変更履歴ページ
4ハンドオフ前のレビュー
レイアウト
グリッドとスペーシング
バージョンリスト、ノート、レールは8pxグリッド上に配置される。リリース見出しはリストと整列する。
階層
視覚的階層
バージョンと日付が先頭に立ち、次に破壊的変更のコールアウト。アクセントは現在のバージョンのみをマークする。
レスポンシブ
モバイルレイアウト
バージョンリストはセレクトに変わる。ノートは全幅に広がる。
インタラクション
インタラクションの確認
アップグレードコマンドをコピーし、古いリリースにジャンプし、破壊的変更のコールアウトリンクを開いてみる。
適合性
Aiderがタスクに適するとき、そして適さないとき
Aiderが適するケース
- モデル非依存、BYOK。 自分のキーを持ち込み、ほぼどのLLMにも接続できます。ビジョン対応モデルなら、参照画像をレスポンシブマークアップに変換できます。
- Gitネイティブのイテレーション。 Aiderの自動コミットは、各デザインパスを元に戻せるレビュー可能な差分に変え、出力をクリーンで追跡可能に保ちます。
- CONVENTIONS.mdコンテキスト。 読み取り専用の規約ファイルが、トークン、プリミティブ、デザインルールを毎回の実行に読み込みます。
- オープンソース。 Apache-2.0でローカルファースト、自分のリポジトリ内のコードを直接操作します。
別のワークフローを選ぶべきケース
- 編集可能なベクターファイルが必要な場合。 AiderはHTMLを返し、編集可能なデザインドキュメントは返しません。そのアセット形式には別のベクターワークフローを検討してください。
- 参照も制約もない場合。 デザインシステムや例がないと、出力は一般的な見た目に流れます。まずブリーフを書きましょう。
- このエージェントに必要な資格情報がない場合。 必須：自分のプロバイダーAPIキー — BYOK（OpenAI、Anthropic、DeepSeek、Gemini、またはローカル）。OpenDesignは資格情報を提供もプロキシもしません。
- チームがOpenCodeまたはKiloで作業している場合。 それらのエージェントには独自のページがあります。ワークスペースは似ていますが、セットアップは変わります。関連エージェントを参照してください。
互換性
開始前に確認すべきAiderの要件
このページは、OpenDesignデスクトップアプリを通じて接続されたAiderについて説明します。公開された参照は2026年9月6日に確認されました。
Tool ScopeAider（Aiderによる）
Aiderは、ターミナルで動作するApache-2.0のオープンソースAIペアプログラミングツールです。コードベースをマッピングし、ファイルをその場で編集し、各変更を適切なメッセージで自動コミットします。このページは、OpenDesignを通じてAiderでインターフェースをデザインすることに関するもので、Aider自身のインターフェースについてではありません。OpenDesignのセットアップノートに利用可能なエージェントが一覧されています。
アカウントと認証独自のプロバイダーAPIキー — BYOK（OpenAI、
自分のプロバイダーAPIキー — BYOK（OpenAI、Anthropic、DeepSeek、Gemini、またはローカル）。そのキーで認証します。資格情報はあなたのマシンに残ります。ここではクォータや価格は約束されません。
システムとバージョンデスクトップアプリまたはソース
デスクトップビルドはダウンロードページにあります。ソースクイックスタートのNode.jsとpnpmの要件は、ソースから実行する場合に適用され、デスクトップパッケージインストールには適用されません。互換性のある最小Aiderバージョン：ここでは検証されていません。
接続確認成功の目安
インストールしたバージョンに表示される接続手順を使用し、小さなタスクを実行します。Aiderがそれを処理し、成果物が開くことを確認します。ダウンロードだけでは、接続が機能することを証明しません。
デスクトップアプリから始める
Aiderのセットアップ、3ステップで
まずダウンロードし、インストールしたバージョンのAiderセットアップを完了し、小さな結果を検証します。このパスに従う場合、OpenDesignをソースからビルドする必要はありません。
- 1
OpenDesignデスクトップアプリをダウンロードする
コンピューター用のパッケージを選び、インストールし、アプリを開きます。
OpenDesignをダウンロードチェックポイントデスクトップアプリが開きます。すでにインストール済みですか？次のステップに進んでください。再度ダウンロードする必要はありません。 - 2
Aiderの接続を準備する
インストールしたバージョンのAiderの指示に従います。自分のプロバイダーAPIキー（BYOK）で認証します。資格情報はローカルに残ります。
Aider — ターミナルでのAIペアプログラミング# 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=)公開ガイドのAiderセットアップノートより。現在のコマンドについてはベンダードキュメントを確認してください。
チェックポイント意図したエージェントとアカウントを確認します。利用できない場合は、より大きなタスクを試みる前に互換性を確認してください。 - 3
Aiderで小さなタスクを1つ実行する
1回のリビジョンを含め、ループ全体を判断できるほど小さなブリーフから始めます。
スターターブリーフプロフィールフォームと保存確認を備えた設定画面を構築してください。私のデザインルールに従ってください。デスクトップとモバイルの幅で確認してください。
チェックポイント結果を開き、保存状態をテストし、1つの具体的な変更をリクエストします。生成はレビューを開始するものであり、終了させるものではありません。
OpenDesignをソースから実行する場合は、代わりにテクニカルクイックスタートに従ってください。
Aiderのデザインワークフロー
Aiderのデザインワークフロー：5つのステップ
以下の変更履歴ページのタスクは、書面によるブリーフから、あなたが確認したファイルまで実行されます。各ステップでは、あなたの入力、AiderのターミナルとGitのアクション、OpenDesignの貢献、そしてあなたが行うべきレビューが示されます。
- 1
デザインブリーフ
平易な言葉で、3～6行。対象読者、画面の役割、プラットフォームを明記します。
- あなたブリーフを起草します。参照スクリーンショットがあれば添付します。
- AiderブリーフとプロジェクトのCONVENTIONS.md指示ファイルを読みます。曖昧な点があれば質問します。
- OpenDesignプロジェクト、プロンプトサーフェス、成果物の種類に応じたスキルを提供します。
- 確認ブリーフに受け入れ基準が記載されていることを確認します。生成後よりも今のうちに追加する方がコストを抑えられます。
- 2
デザイン制約
デザインシステムと少数の厳格なルールです。これがブランドに沿った出力と、ありふれた見た目とを分ける要因になります。
- あなたデザインシステムを選び、ブレークポイントと必須のコンポーネントを指定します。
- Aider1行も書く前に、DESIGN.mdのトークンとポスチャールールをコンテキストに読み込みます。
- OpenDesignデザインシステムライブラリを提供し、選択したものをスキルテンプレートに紐付けます。
- 確認トークンがブランドに合っているかを確認します。アクセントカラーは1色、フォントと角丸の値が適切であることを確かめます。
- 3
インターフェースを生成する
Aiderは、レイアウト、スタイル、インタラクション、安定したフックを含む自己完結型のHTMLファイルを作成します。
- あなた待つか、確認の質問に答えます。設定することは何もありません。
- Aiderセクションを計画し、HTML、CSS、JavaScriptを記述し、ファイルを実行して失敗した箇所を修正します。
- OpenDesign成果物をプロジェクトフォルダに保存し、プレビュー用にインデックスを作成します。
- 確認ここではまだ何もありません。ファイルはソースではなく、レンダリングされた状態で評価します。
- 4
プレビュー
ファイルは、指定した幅で OpenDesign 内にレンダリングされます。ここでデザインが判断されます。
- あなた幅を切り替え、インタラクションをクリックして試し、要素にコメントを残します。
- Aiderプレビューに対するコメントを読み、次の修正版を準備します。
- OpenDesignプレビューをレンダリングし、コメントや編集用に
data-od-idターゲットを公開します。 - チェック階層構造、コントラスト、390px でのオーバーフロー、フォーカス状態、そしてアクセントカラーが控えめに使われているかを確認します。
- 5
修正と検証
プレビュー内の要素を指して変更をリクエストします。Aiderは各リビジョンをコミットするので、何も黙って上書きされません。
- あなたコメントを依頼に変換し、タスクが完了したかどうかを判断します。
- Aider変更をその場で適用し、ファイルを再実行します。
- OpenDesignバージョンを並べて保持し、完了時に画像または HTML をエクスポートします。
- チェック変更された部分のみを再確認した後、各ブレークポイントでページ全体を一度確認します。
リソース
Aiderデザインリソース
制限事項
Aider の制限事項、手動チェック、フォールバック
- 対象範囲このページでは、OpenDesign に接続されたエージェントとしての Aider について説明します。Aider のすべての機能を網羅するものではありません。
- 利用制限使用制限とコストは、あなたが持ち込む資格情報（自分のプロバイダーAPIキー — BYOK（OpenAI、Anthropic、DeepSeek、Gemini、またはローカル））に従います。ここでは無料クォータの主張は行われません。
- ネットワークローカルのプロジェクトファイルであっても、推論がオフラインで行われるとは限りません。機密性のある入力を共有する前に、エージェントのプロバイダー設定とデータポリシーを確認してください。
- 出力は HTML です成果物は HTML ファイルであり、ベクター形式のデザインファイルではありません。
- 手動レビューアクセシビリティ、実際のコンテンツ、ブランドとの整合性、インタラクションの正しさは、プレビューであなたが確認します。エージェントによる自己チェックは、あくまで一次チェックとして扱ってください。
- フォールバックエージェントが利用できない場合やタスクが失敗した場合は、インストールされているバージョンの接続手順と認証を確認してください。設定を変更する前に、エラーと最後に成功した成果物を保存しておいてください。
よくある質問
Aider と OpenDesign に関するよくある質問
Aiderは実際にデザイン作業ができるのか？
はい。美的スキル、デザインシステム、そしてコンテキスト内の実際の参照画像があれば、Aider は本番品質のレスポンシブ UI を生成します。また、ビジョン対応モデルでは、スクリーンショットを読み取って出力を参照画像と照合できます。そうしたコンテキストがなければ、汎用的な見た目になりがちで、そこが OpenDesign が補うギャップです。
デザインに Aider を使う際、どのモデルを使用できますか？
Aider はモデルを問いません。ご自身の API キーを用意すれば、Claude、GPT-4o、DeepSeek、Gemini、あるいはローカルモデルなど、ほぼすべての LLM に接続できます。画像を用いたデザイン作業には、GPT-4o や Claude のようなビジョン対応モデルを使用してください。OpenDesign は認証情報を代理送信することはありません。
デザインにおいて Aider が特に優れている点は何ですか？
2つあります。1つはモデルを問わないため、タスクに最適なモデルを選べること。もう1つは git ネイティブであり、変更ごとにコミットされるため、各デザインの反復をレビューし、元に戻すことができることです。どちらも役立ちますが、センスはあくまでご自身が用意するデザインシステム、スキル、参照によって決まります。
Aider はファイルを編集し、Git にコミットしますか？
はい。Aider はリポジトリ内のファイルを直接編集し、各変更を適切なメッセージとともに自動的にコミットします。そのため、すでにお使いの git ツールを使って、AI の作業を diff・管理・取り消しすることができます。
デザインの規約を Aider に渡すにはどうすればよいですか？
トークン、プリミティブ、ルールを記載した CONVENTIONS.md を作成し、/read CONVENTIONS.md または aider --read CONVENTIONS.md で読み取り専用として読み込みます（あるいは .aider.conf.yml に read: CONVENTIONS.md を設定すれば、実行ごとに自動的に読み込まれます）。これにより、Aider はデフォルトの見た目ではなく、あなたのブランドに沿って作業します。
Aider とは実際に何なのか
Aider は、ターミナルで動作するオープンソース（Apache-2.0）の AI ペアプログラミングツールです。既存のコードベースを読み取り、コンテキスト用にリポジトリ全体をマッピングし、ファイルを直接編集し、各変更を適切なメッセージとともに自動コミットします —— そのため、すでに使っている git ツールで AI の作業を diff、管理、取り消しできます。100 以上のプログラミング言語に対応し、新規プロジェクトを開始したり既存のプロジェクトを拡張したりできます。
デザイン作業では、2 つの特性が際立ちます。Aider はモデル非依存です。自分のキーを持ち込み、ほぼ任意の LLM —— Claude、GPT-4o、DeepSeek、Gemini、またはローカルモデル —— に接続できるため、1 つのプロバイダーに縛られることはありません。また GPT-4o や Claude のような視覚対応モデルでは、画像ファイルを読み取り、参照用スクリーンショットをプロンプトの一部にできます。
規約ファイル: Aider は /read CONVENTIONS.md（または aider --read CONVENTIONS.md）で読み込む CONVENTIONS.md ファイルを読み取ります —— ここは、デザイン規約、トークン、レビューチェックリストを読み取り専用コンテキストとしてエンコードするのに自然な場所です。
Git ネイティブな編集: すべての変更はリポジトリ内のファイルに適用され、自動的にコミットされるため、各デザインイテレーションは使い慣れた git ツールでレビューおよび取り消しが可能です。
自分のモデルを持ち込む: 自分の API キーで OpenAI、Anthropic、DeepSeek、Gemini、またはローカルモデルに接続します。Aider は単一ベンダーやホスト型バックエンドに縛られません。
認証情報: 自分のプロバイダー API キー —— BYOK（OpenAI、Anthropic、DeepSeek、Gemini、またはローカルモデル）
ベンダー: Aider（Aider-AI、オープンソース） —— モデル非依存
ライセンス: Apache-2.0、オープンソース
デザイン作業では、2 つの特性が際立ちます。Aider はモデル非依存です。自分のキーを持ち込み、ほぼ任意の LLM —— Claude、GPT-4o、DeepSeek、Gemini、またはローカルモデル —— に接続できるため、1 つのプロバイダーに縛られることはありません。また GPT-4o や Claude のような視覚対応モデルでは、画像ファイルを読み取り、参照用スクリーンショットをプロンプトの一部にできます。
規約ファイル: Aider は /read CONVENTIONS.md（または aider --read CONVENTIONS.md）で読み込む CONVENTIONS.md ファイルを読み取ります —— ここは、デザイン規約、トークン、レビューチェックリストを読み取り専用コンテキストとしてエンコードするのに自然な場所です。
Git ネイティブな編集: すべての変更はリポジトリ内のファイルに適用され、自動的にコミットされるため、各デザインイテレーションは使い慣れた git ツールでレビューおよび取り消しが可能です。
自分のモデルを持ち込む: 自分の API キーで OpenAI、Anthropic、DeepSeek、Gemini、またはローカルモデルに接続します。Aider は単一ベンダーやホスト型バックエンドに縛られません。
認証情報: 自分のプロバイダー API キー —— BYOK（OpenAI、Anthropic、DeepSeek、Gemini、またはローカルモデル）
ベンダー: Aider（Aider-AI、オープンソース） —— モデル非依存
ライセンス: Apache-2.0、オープンソース
モデル非依存で Git ネイティブなツールがデザインに適する理由
Aider のデザイン上の強みは、リポジトリとの連携方法とモデルの選択にあります —— ただし、どのエージェントでもそうであるように、センスは依然として与えなければなりません。
モデル非依存、BYOK: タスクと予算に最適なデザインを行うモデル —— Claude、GPT-4o、DeepSeek、Gemini —— を選び、ワークフローを変えずに自由に切り替えられます。すべて自分のキーで行えます。
Git ネイティブなイテレーション: 自動コミットにより、各デザインパスが取り消し可能なレビュー用 diff になるため、追跡されていない編集の山ではなく、クリーンなベースに対してイテレーションできます。
CONVENTIONS.md の規約: CONVENTIONS.md（読み取り専用で読み込まれる）が、エージェントにトークン、コンポーネント、ルールを示すため、デフォルトの見た目ではなくブランドに沿って作業します。
センスは、あなたが提供する 3 つの入力 —— デザインシステム、スキル、実際の参照画像 —— から生まれます。
教訓は、どのエージェントも教えてくれる同じものです。Aider はデフォルトではセンスを持ちません。制約 —— デザインシステム、美的スキル、具体的な参照 —— を与えると、良いデザインを生み出します。OpenDesign はまさにそれらの入力をパッケージ化しており、だからこそ両者は組み合わさるのです（詳細は後述）。
モデル非依存、BYOK: タスクと予算に最適なデザインを行うモデル —— Claude、GPT-4o、DeepSeek、Gemini —— を選び、ワークフローを変えずに自由に切り替えられます。すべて自分のキーで行えます。
Git ネイティブなイテレーション: 自動コミットにより、各デザインパスが取り消し可能なレビュー用 diff になるため、追跡されていない編集の山ではなく、クリーンなベースに対してイテレーションできます。
CONVENTIONS.md の規約: CONVENTIONS.md（読み取り専用で読み込まれる）が、エージェントにトークン、コンポーネント、ルールを示すため、デフォルトの見た目ではなくブランドに沿って作業します。
センスは、あなたが提供する 3 つの入力 —— デザインシステム、スキル、実際の参照画像 —— から生まれます。
教訓は、どのエージェントも教えてくれる同じものです。Aider はデフォルトではセンスを持ちません。制約 —— デザインシステム、美的スキル、具体的な参照 —— を与えると、良いデザインを生み出します。OpenDesign はまさにそれらの入力をパッケージ化しており、だからこそ両者は組み合わさるのです（詳細は後述）。
デザイン作業のためにAiderをゼロからセットアップする
セットアップ手順: インストール → 自分のキーを持ち込む → CONVENTIONS.md を読み込む → リファレンスを追加する → ブラウザ検証を有効にする。
デザインルールを明文化する: トークン、プリミティブ、規約を CONVENTIONS.md に記述し、読み取り専用で読み込みます。そうすることで、出力が汎用的な見た目にデフォルトするのではなく、ブランドに合致します。
ブラウザ検証を追加する: 開発サーバーを実行し、Aider に実際のブラウザでレンダリングさせ、ビルドが通ることだけを確認するのではなく、ブレークポイントをまたいで出力をチェックします。
コマンドとバージョン固有の詳細については、現在のセットアップセクションを使用してください。これらは変更される可能性があります。
前のガイドの歴史的なコマンド例です。現在の構文はリンク先のベンダードキュメントで確認してください。
デザインルールを明文化する: トークン、プリミティブ、規約を CONVENTIONS.md に記述し、読み取り専用で読み込みます。そうすることで、出力が汎用的な見た目にデフォルトするのではなく、ブランドに合致します。
ブラウザ検証を追加する: 開発サーバーを実行し、Aider に実際のブラウザでレンダリングさせ、ビルドが通ることだけを確認するのではなく、ブレークポイントをまたいで出力をチェックします。
コマンドとバージョン固有の詳細については、現在のセットアップセクションを使用してください。これらは変更される可能性があります。
# 1. Aiderをインストール（推奨インストーラー、Python 3.8–3.13）
python -m pip install aider-install
aider-install
# または pipx の場合: pipx install aider-chat
# 2. git プロジェクトで起動し、自分のキーを持ち込む
cd your-project
aider --model sonnet --api-key anthropic=<your-key>
# または: aider --api-key openai=<your-key> (deepseek=, gemini= も可)
# 3. デザイン規約を読み取り専用コンテキストとして読み込む
aider --read CONVENTIONS.md
# 4. リファレンス画像を追加（vision 対応モデルで）
# チャット内: /add reference-desktop.png前のガイドの歴史的なコマンド例です。現在の構文はリンク先のベンダードキュメントで確認してください。
スクリーンショットからUIへのワークフロー
Aider で最も効果の高いデザインループは、リファレンス画像を動作するレスポンシブ UI に変換し、一致するまで反復することです。その際、vision 対応モデルを使って出力をリファレンスと比較し、各パスを git にコミットします。
手持ちの中で最も明確なビジュアルリファレンスから始め、1つのヒーローショットだけでなく、複数の状態（デスクトップとモバイル、ホバー、空、読み込み中）を含めます。
プロンプトでは具体的に指示します。曖昧なプロンプトでは、強力なモデルでも汎用的な UI が生成されます。
デザインシステムと規約は CONVENTIONS.md に置き、トークンと正規のプリミティブがどこにあるかを Aider に伝えます。
開発サーバーを実行し、実際のブラウザでレンダリング結果を確認し、ブレークポイントにリサイズします。
Aider に実装をスクリーンショットと比較させて反復します。単にビルドが通ることを確認するだけではいけません。
vision 対応モデルで /add（またはクリップボードから /paste）で画像を追加し、具体的な制約を与えます:
プロンプトは小さく焦点を絞ります。Aider は各変更をコミットするため、良い反復を保持し、悪いものは git（または /undo）で元に戻せます。そうすれば、どのパスもクリーンなベースの上に積み重なります。
前のガイドの歴史的なコマンド例です。現在の構文はリンク先のベンダードキュメントで確認してください。
手持ちの中で最も明確なビジュアルリファレンスから始め、1つのヒーローショットだけでなく、複数の状態（デスクトップとモバイル、ホバー、空、読み込み中）を含めます。
プロンプトでは具体的に指示します。曖昧なプロンプトでは、強力なモデルでも汎用的な UI が生成されます。
デザインシステムと規約は CONVENTIONS.md に置き、トークンと正規のプリミティブがどこにあるかを Aider に伝えます。
開発サーバーを実行し、実際のブラウザでレンダリング結果を確認し、ブレークポイントにリサイズします。
Aider に実装をスクリーンショットと比較させて反復します。単にビルドが通ることを確認するだけではいけません。
vision 対応モデルで /add（またはクリップボードから /paste）で画像を追加し、具体的な制約を与えます:
プロンプトは小さく焦点を絞ります。Aider は各変更をコミットするため、良い反復を保持し、悪いものは git（または /undo）で元に戻せます。そうすれば、どのパスもクリーンなベースの上に積み重なります。
aider --model gpt-4o --read CONVENTIONS.md
# チャット内:
> /add reference-desktop.png
> /add reference-mobile.png
> このデザインを React + Vite + Tailwind + TypeScript で実装してください。
既存のデザインシステムコンポーネントと CONVENTIONS.md のトークンを再利用してください。
スペーシング、レイアウト、階層を一致させ、レスポンシブにしてください。
ブラウザでレンダリングし、ブレークポイント間でリファレンスに一致するまで修正点を伝えます。前のガイドの歴史的なコマンド例です。現在の構文はリンク先のベンダードキュメントで確認してください。
CONVENTIONS.md、画像、コマンド
3つの機能が Aider を継続的なデザイン作業に実用的にし、そのすべてがオープンなデザインワークフローにきれいに対応します。
CONVENTIONS.md コンテキスト：コーディングとデザインの規約は、/read CONVENTIONS.md または aider --read CONVENTIONS.md で読み込むか、.aider.conf.yml で read: CONVENTIONS.md を設定して毎回の実行時に読み込ませます。これは、トークン、プリミティブ、ルールの永続的な置き場所です。
画像と Web ページ：視覚対応モデルでは、/add で画像ファイルを追加するか、/paste でクリップボードから貼り付けて、Aider に実際の参照を与えます；/web はページのテキストをチャットに取り込み、追加のコンテキストにします。
チャット内コマンド：ファイルをコンテキストに取り込む /add、読み取り専用の参照のための /read、最後のコミットを巻き戻す /undo などのコマンドにより、ターミナルを離れずに参照を集め、検証ループを実行できます。
これらは移植可能でリポジトリネイティブな機能であり、プロジェクトごとに再作成するのではなく、まさに OpenDesign がオーケストレーションするために作られている類のものです。
CONVENTIONS.md コンテキスト：コーディングとデザインの規約は、/read CONVENTIONS.md または aider --read CONVENTIONS.md で読み込むか、.aider.conf.yml で read: CONVENTIONS.md を設定して毎回の実行時に読み込ませます。これは、トークン、プリミティブ、ルールの永続的な置き場所です。
画像と Web ページ：視覚対応モデルでは、/add で画像ファイルを追加するか、/paste でクリップボードから貼り付けて、Aider に実際の参照を与えます；/web
チャット内コマンド：ファイルをコンテキストに取り込む /add、読み取り専用の参照のための /read、最後のコミットを巻き戻す /undo などのコマンドにより、ターミナルを離れずに参照を集め、検証ループを実行できます。
これらは移植可能でリポジトリネイティブな機能であり、プロジェクトごとに再作成するのではなく、まさに OpenDesign がオーケストレーションするために作られている類のものです。
デザインにおけるAiderとCodex、Claude Code、Cursor、Gemini CLIの比較
デザイン作業に単一の勝者はいません — 各エージェントには異なる強みがあり、経験豊富なチームはそれらを重ねて使います。公平にまとめると：
Aider — オープンソース、モデル非依存（BYOK）、git ネイティブ；自動コミットによりすべての反復がレビュー可能かつ可逆 — 既存コードベース上で、最も設計に適したモデルを使って行うリポジトリネイティブな反復
Codex — フロントエンドスキルによる強力な視覚的洗練；サンドボックス化された非同期ビルド — 委任された非同期ビルドと移植可能な AGENTS.md ルール
Claude Code — 具体的なデザイン判断（hex、spacing、type）とコードベースを意識した UX — フロントエンドの推論と大規模コンテキストのリファクタリング
Cursor — ライブプレビューとインライン編集による視覚的な「作って見る」ループ — IDE 内での密な反復と確認を伴う UI 作業
Gemini CLI — 強力なマルチモーダル画像理解と 1M トークンのコンテキスト；無料枠のあるオープンソース — スクリーンショット中心の作業と、デザインシステム全体をコンテキストに保持すること
コミュニティで繰り返し出る結論は、センスは人間から来るというものです：スキル、参照、制約がなければ、どれも既定で一般的な美学になります。それこそが本当に解くべき問題であり、モデルの形ではなくデザインツールの形をした問題です。
エージェント — デザイン上の強み — 最適な用途
Aider — オープンソース、モデル非依存（BYOK）、git ネイティブ；自動コミットによりすべての反復がレビュー可能かつ可逆 — 既存コードベース上で、最も設計に適したモデルを使って行うリポジトリネイティブな反復
Codex — フロントエンドスキルによる強力な視覚的洗練；サンドボックス化された非同期ビルド — 委任された非同期ビルドと移植可能な AGENTS.md ルール
Claude Code — 具体的なデザイン判断（hex、spacing、type）とコードベースを意識した UX — フロントエンドの推論と大規模コンテキストのリファクタリング
Cursor — ライブプレビューとインライン編集による視覚的な「作って見る」ループ — IDE 内での密な反復と確認を伴う UI 作業
Gemini CLI — 強力なマルチモーダル画像理解と 1M トークンのコンテキスト；無料枠のあるオープンソース — スクリーンショット中心の作業と、デザインシステム全体をコンテキストに保持すること
コミュニティで繰り返し出る結論は、センスは人間から来るというものです：スキル、参照、制約がなければ、どれも既定で一般的な美学になります。それこそが本当に解くべき問題であり、モデルの形ではなくデザインツールの形をした問題です。
エージェント — デザイン上の強み — 最適な用途
落とし穴と、「AI slop」な見た目を避ける方法
AI生成デザインに関する最も一般的な不満は、それが凡庸に見えることです — 柔らかなグラデーション、浮遊するパネル、大きすぎる角丸、ドラマチックな影、Interと紫の組み合わせで「AIがこれを作った」と叫んでいるような雰囲気。他に報告されている問題には、壊れたモバイルレイアウトや、UIコピーに指示が漏れ出ることが含まれます。これらはAiderに固有のものではありません。これらは、キュレーションされたデザインコンテキストなしでエージェントが実行されたときに起こることです。
美的スキルを追加する: キュレーションされたデザインスキルは、エージェントにデフォルトの見た目ではなく、実際の方向性にコミットするよう強制します。
実際のブラウザで検証する: ブレークポイント全体でレンダリングと自己チェックを行い、モバイルでレイアウトがサイレントに壊れないようにします — ビジョン対応モデルでは、スクリーンショットをフィードバックします。
トークンと参照を提供する: 実際のデザイントークンと参照スクリーンショットは、出力品質に対する単一最大のレバーです。
CONVENTIONS.mdにルールをエンコードする: 「ヒーローカードなし、書体は最大2つ、ブランド優先の階層」といったスタイルルールを、エージェントが毎回の実行で読む場所に配置します。
すべての緩和策は、エージェントにキュレーションされたデザインコンテキストを与えることにあることに注意してください。そのコンテキストをプロジェクトごとに手作業で維持することは、OpenDesignが取り除く苦労です。
美的スキルを追加する: キュレーションされたデザインスキルは、エージェントにデフォルトの見た目ではなく、実際の方向性にコミットするよう強制します。
実際のブラウザで検証する: ブレークポイント全体でレンダリングと自己チェックを行い、モバイルでレイアウトがサイレントに壊れないようにします — ビジョン対応モデルでは、スクリーンショットをフィードバックします。
トークンと参照を提供する: 実際のデザイントークンと参照スクリーンショットは、出力品質に対する単一最大のレバーです。
CONVENTIONS.mdにルールをエンコードする: 「ヒーローカードなし、書体は最大2つ、ブランド優先の階層」といったスタイルルールを、エージェントが毎回の実行で読む場所に配置します。
すべての緩和策は、エージェントにキュレーションされたデザインコンテキストを与えることにあることに注意してください。そのコンテキストをプロジェクトごとに手作業で維持することは、OpenDesignが取り除く苦労です。
OpenDesign内でAiderを使ってデザインする
OpenDesignは、上記のワークフローが求め続けているオープンソースのデザインレイヤーです。これはAiderをファーストパーティアダプターとして扱い、キュレーションされたスキルとデザインシステムライブラリ、構造化されたレンダリングパイプライン、ローカルデスクトップUIで包みます — そのため、Aiderを良くするデザインコンテキストが最初の実行から存在し、毎回手作業で組み立てる必要はありません。両方ともオープンソースでローカルファーストであり、この組み合わせは自然な適合となります。
独自のプロバイダーAPIキー（BYOK）で認証します — OpenAI、Anthropic、DeepSeek、またはGemini。認証情報はあなたのマシンに留まり、当社を経由してプロキシされることはありません。
デザインシステムとスキルを選択し、一貫したテイストでデッキ、プロトタイプ、ランディングページを生成します。
すべての成果物とDESIGN.mdファイルは、ホストされたクラウドではなく、あなた自身のgitリポジトリに保存されます。
同じAiderエージェント、同じキー — さらにその周りに、本物の、ポータブルな、オープンソースのデザインワークフローがあります。これはローカルファーストでオープンソースなので、あなたの作業や認証情報があなたのマシンから出ることはありません。
OpenDesignをインストールし、エージェントとしてAiderを選択します。
独自のプロバイダーAPIキー（BYOK）で認証します — OpenAI、Anthropic、DeepSeek、またはGemini。認証情報はあなたのマシンに留まり、当社を経由してプロキシされることはありません。
デザインシステムとスキルを選択し、一貫したテイストでデッキ、プロトタイプ、ランディングページを生成します。
すべての成果物とDESIGN.mdファイルは、ホストされたクラウドではなく、あなた自身のgitリポジトリに保存されます。
同じAiderエージェント、同じキー — さらにその周りに、本物の、ポータブルな、オープンソースのデザインワークフローがあります。これはローカルファーストでオープンソースなので、あなたの作業や認証情報があなたのマシンから出ることはありません。
OpenDesignをインストールし、エージェントとしてAiderを選択します。
OpenDesignはAiderと提携していますか？
いいえ。OpenDesign は独立しており、Aider とは提携していません。