参考リンク
Kiloに関するさらに詳しい資料
公開ガイドに記載されている、Kiloでデザインを行うためのチュートリアル、ドキュメント、解説記事です。
Kilo 
OpenDesign OpenDesign で
Kilo と
デザインする。
OpenDesignでKilo Codeを使ってインターフェースをデザインする方法：選ぶモデル、独自のルールとモード、スクリーンショットからレビュー済みファイルまでの1つのプロダクトページタスク、そして始める前に知っておくべき限界について解説します。
ブリーフからインターフェースへ01 / Kilo
アイデアを持ち込むのはあなたです↗
「スクリーンショットから作った
プロダクトページを、好きなモデルで。」
このKiloガイドへの3つの入口
Kiloで始める場所を選ぶ
完全なKiloデザインタスク1件
Kiloデザインタスク：ブリーフからインターフェースまで
1つのタスクを最初から最後まで示します：渡すブリーフと制約、返ってくる成果物、そして完了までに実行するチェック内容です。以下のインターフェースはこのページ用に作成した例示であり、実際に記録されたKiloの実行結果ではありません。
1設計ブリーフと制約条件
ブリーフ添付のスクリーンショットから、アウトドアブランドのプロダクト詳細ページをデザインしてください：ギャラリー、価格、サイズとカラーのオプション、カートに追加、関連商品。デスクトップとスマートフォン対応。
- デザインシステムOpenDesignのペーパーキャンバス：Albert Sans、グリーンのアクセント1色
- ブレークポイント1440pxデスクトップと390pxモバイル、横スクロールなし
- インタラクションギャラリーのサムネイル、オプション選択、カートに追加、関連商品のスクロール
- 出力安定した
data-od-idフックを持つ、自己完結型のHTMLファイル1つ
2作業分担：あなた、Kilo、OpenDesign
- あなた
ブリーフを作成し、デザインシステムを選択し、受け入れ基準を定義します。
- Kilo
レイアウトを計画し、HTML、CSS、JavaScriptを書き、要求に応じて修正します。
- OpenDesign
デザインシステムとスキルを提供し、プレビューをレンダリングし、すべてのバージョンをプロジェクト内のファイルとして保存します。
- レビュー
ビジュアルの階層構造、8pxグリッドに基づく間隔、両方のブレークポイント、そしてすべてのインタラクションが、引き渡し前にチェックされます。
3Kilo成果物：1440pxと390pxのProduct Page
4ハンドオフ前のレビュー
レイアウト
グリッドとスペーシング
ギャラリーと情報は8pxグリッドに準拠しており、1440では情報カラムがギャラリーの高さを超えることはありません。
階層
視覚的階層
名前、価格、次にオプションの順で表示し、アクセントはカートに追加ボタンのみに使用します。
レスポンシブ
モバイルレイアウト
まずギャラリー、次に名前と価格、オプション、フル幅のボタンが続き、関連商品はスクロールで表示します。
インタラクション
インタラクションの確認
サムネイルを切り替え、サイズを選び、カートに追加し、関連商品をスクロールします。
適合性
Kilo が適したタスクと適さないタスク
Kilo が適しているケース
- モデルに依存しないスクリーンショット → UI。 参照画像をレスポンシブなマークアップに変換するのに最適な、ビジョン対応モデルで駆動し、その結果を参照画像と照らし合わせて確認します。
- プロバイダー横断の BYOK。 Anthropic、OpenAI、Google、OpenRouter などの自分のキーを持ち込む、あるいは Kilo のゲートウェイを利用することで、コストと認証情報を自分の管理下に置けます。
- モード + カスタムルール + MCP。 Architect モードで計画を立て、Code モードで構築し、カスタムルールでコンベンションを引き継ぎ、Figma MCP サーバーで実際のデザインコンテキストを取り込みます。
- オープンソース。 すべてのプロンプトとコンテキストのペイロードを確認できます。隠されているものはなく、エージェントは IDE または CLI 内で動作します。
別のワークフローを選ぶべきケース
- 編集可能なベクターファイルが必要な場合。 成果物はHTMLであり、編集可能なデザインドキュメントではありません。必要なアセット形式については、別のベクターワークフローをご確認ください。
- 参照も制約もない場合。 デザインシステムや例がないと、出力は一般的な見た目になりがちです。まずブリーフを書いてください。
- このエージェントに必要な認証情報をお持ちではありません。 必須: 自分のプロバイダー API キー（bring your own key）または Kilo のゲートウェイ。OpenDesign は認証情報の提供や代理を行いません。
- チームはOpenCodeまたはAiderで作業しています。 これらのエージェントには専用ページがあります。ワークスペースは同じですが、セットアップが異なります。関連エージェントをご覧ください。
互換性
開始前に必要なKiloの要件
このガイドでは、OpenDesignデスクトップアプリを通じて接続されたKiloを扱います。公開情報の確認日: 2026年9月6日。
ツールの範囲Kilo（Kilo Code, Inc. 提供）
Kilo CodeはKilo Code, Inc.が提供するオープンソースのAIコーディングエージェントです。VS Code、JetBrains系IDE、ターミナル上で動作し、コードベースを読み取り、ファイルを編集し、コマンドを実行します。このページはOpenDesignを通じてKiloでインターフェースをデザインすることについて説明しており、Kilo自体のインターフェースについてではありません。OpenDesignのセットアップノートに利用可能なエージェントの一覧があります。
アカウントと認証自分のプロバイダーAPIキー（BYOK）またはKiloのもの
自分のプロバイダーAPIキー（BYOK）またはKiloのゲートウェイを使用します。自分のプロバイダーキー（BYOK）またはKiloのゲートウェイで認証します。認証情報はあなたのマシン上に留まります。このページはクォータや価格を保証するものではありません。
システムとバージョンデスクトップアプリまたはソース
デスクトップ版のビルドについてはダウンロードページをご確認ください。元のクイックスタートに記載されているNode.jsとpnpmの要件は、ソースから実行する場合に適用されるもので、デスクトップパッケージのインストールには適用されません。互換性のある最小のKiloバージョンについては、ここでは未確認です。
接続確認成功の目安
インストール済みバージョンに表示される接続手順に従い、小さなタスクを実行してください。Kiloがそれを処理し、成果物が開くことを確認します。ダウンロードだけでは、正常な接続が確立されたことにはなりません。
デスクトップアプリから始める
3ステップで行うKiloのセットアップ
まずダウンロードし、インストールしたバージョンに合わせてKiloのセットアップを完了させ、その後小さな結果を確認してください。この手順に従うために、OpenDesignをソースからビルドする必要はありません。
- 1
OpenDesignデスクトップアプリをダウンロードする
お使いのコンピューターに合ったパッケージを選び、インストールしてアプリを開いてください。
OpenDesignをダウンロードチェックポイントデスクトップアプリが開きます。すでにインストール済みの場合は、次のステップに進んでください。再度ダウンロードする必要はありません。 - 2
Kilo接続を準備する
インストールしたバージョンのKiloの手順に従ってください。自分のプロバイダーキー（BYOK）またはKiloのゲートウェイで認証します — 認証情報はお使いのマシン上に留まります。
Kilo Code のドキュメント# 1. Install the Kilo Code extension from the VS Code # (or JetBrains) marketplace, or install the CLI. # 2. Open your project and sign in / add a provider key cd your-project kilo # connect your provider (BYOK) or Kilo's gateway公開ガイドのKiloセットアップ手順から。最新のコマンドについてはベンダーのドキュメントを確認してください。
チェックポイント想定しているエージェントとアカウントを確認してください。利用できない場合は、大きなタスクを試す前に互換性を確認してください。 - 3
小さなKiloタスクを1つ実行する
全体のループを判断できるよう、1回の修正を含む小さなブリーフを使用してください。
スターターブリーフプロフィールフォームと保存確認を備えた設定画面を作成してください。私のデザインルールを使用し、デスクトップとモバイルの幅で確認してください。
チェックポイント結果を開き、保存状態をテストして、具体的な変更を一つ依頼してください。生成されたファイルはレビューの始まりであり、終わりではありません。
ソースから OpenDesign を実行するには、代わりに技術クイックスタートをご覧ください。
Kiloデザインワークフロー
5ステップで見るKiloデザインワークフロー
ブリーフから検証済みファイルまで、同じプロダクトページのタスクを追っていきます。各ステップでは、あなたが提供するもの、Kiloが行うこと、OpenDesignが提供するもの、あなたが確認する内容を示します。
- 1
デザインブリーフ
平易な言葉で3〜6行。対象ユーザー、画面の役割、対象プラットフォームを明記します。
- あなたブリーフを書きます。参考となるスクリーンショットがあれば添付します。
- Kiloブリーフとプロジェクトの指示ファイルを読み込み、不明な点があれば質問します。
- OpenDesignプロジェクト、プロンプトサーフェス、成果物の種類に応じたスキルを提供します。
- 確認ブリーフに受け入れ基準が記載されていることを確認します。生成後よりも今のうちに追加する方がコストを抑えられます。
- 2
デザイン制約
デザインシステムと少数の厳格なルールです。これがブランドに沿った出力と、ありふれた見た目とを分ける要因になります。
- あなたデザインシステムを選び、ブレークポイントと必須のコンポーネントを指定します。
- Kilo1行を書く前に、DESIGN.mdのトークンと方針ルールをコンテキストに読み込みます。
- OpenDesignデザインシステムライブラリを提供し、選択したものをスキルテンプレートに紐付けます。
- 確認トークンがブランドに合っているかを確認します。アクセントカラーは1色、フォントと角丸の値が適切であることを確かめます。
- 3
インターフェースを生成する
Kiloは自己完結型のHTMLファイルを作成します：レイアウト、スタイル、インタラクション、安定したフックを含みます。
- あなた待つか、確認の質問に答えます。設定することは何もありません。
- Kiloセクションを計画し、HTML、CSS、JavaScriptを記述し、ファイルを実行して不具合を修正します。
- OpenDesign成果物をプロジェクトフォルダに保存し、プレビュー用にインデックスを作成します。
- 確認ここではまだ何もありません。ファイルはソースではなく、レンダリングされた状態で評価します。
- 4
プレビュー
ファイルは、指定した幅で OpenDesign 内にレンダリングされます。ここでデザインが判断されます。
- あなた幅を切り替え、インタラクションをクリックして試し、要素にコメントを残します。
- Kiloプレビューへのコメントを読み込み、次の修正版を用意します。
- OpenDesignプレビューをレンダリングし、コメントや編集用に
data-od-idターゲットを公開します。 - チェック階層構造、コントラスト、390px でのオーバーフロー、フォーカス状態、そしてアクセントカラーが控えめに使われているかを確認します。
- 5
修正と検証
プレビュー内の要素を指し示して変更を依頼します。修正はすべて新しいファイルとして作成され、既存のものが黙って上書きされることはありません。
- あなたコメントを依頼に変換し、タスクが完了したかどうかを判断します。
- Kilo変更をその場で適用し、ファイルを再実行します。
- OpenDesignバージョンを並べて保持し、完了時に画像または HTML をエクスポートします。
- チェック変更された部分のみを再確認した後、各ブレークポイントでページ全体を一度確認します。
リソース
Kiloデザインリソース
制限事項
Kiloの制約事項、手動チェックとフォールバック
- 対象範囲Kiloはモデルに依存せず、多くのプロバイダーでBYOKに対応し、Architect/Code/Debug/Askの各モードとMCPサポートを備えているため、モデルを選択しながら認証情報を自分の管理下に置けます。このページでは、OpenDesignに接続されたエージェントとしてのKiloについて説明しており、Kiloのすべての機能を網羅するものではありません。
- 利用制限利用制限とコストは、使用する認証情報（自分のプロバイダーAPIキーまたはKiloのゲートウェイ）に応じて決まります。このページでは無料枠についての言及は行いません。
- ネットワークローカルのプロジェクトファイルであっても、推論がオフラインで行われるとは限りません。機密性のある入力を共有する前に、エージェントのプロバイダー設定とデータポリシーを確認してください。
- 出力は HTML です成果物は HTML ファイルであり、ベクター形式のデザインファイルではありません。
- 手動レビューアクセシビリティ、実際のコンテンツ、ブランドとの整合性、インタラクションの正しさは、プレビューであなたが確認します。エージェントによる自己チェックは、あくまで一次チェックとして扱ってください。
- フォールバックエージェントが利用できない場合やタスクが失敗した場合は、インストールされているバージョンの接続手順と認証を確認してください。設定を変更する前に、エラーと最後に成功した成果物を保存しておいてください。
よくある質問
KiloとOpenDesignに関するよくある質問
Kilo Codeは本当にデザイン作業ができますか？
はい。美しさに関するスキル、デザインシステム、そしてコンテキスト内の実際の参考画像があれば、Kilo Codeは本番品質のレスポンシブなUIを生成でき、ビジョン対応モデルが出力を参照と照合して検証します。そうしたコンテキストがない場合は汎用的な見た目になりがちで、そこがOpenDesignが補う部分です。
Kilo Codeでデザインするのにお金は必要ですか？
Kilo Codeはオープンソースであり、インストールは無料です。ご自身のプロバイダーのAPIキー（BYOK）を用意し、そのプロバイダーに直接支払うか、Kiloの独自ゲートウェイをプロバイダー価格で利用します。どちらの場合も、OpenDesignがお客様の認証情報を中継することはありません。
Kilo Codeがデザインに特に適している理由は何ですか？
モデルに依存せずオープンソースであるため、参考スクリーンショットを最もよく読み取れるビジョン対応モデルで動かし、送信されているコンテキストを正確に確認し、コストと認証情報を自分で管理できます。それでも、テイストはご自身が用意するデザインシステム、スキル、参考資料から生まれます。
フロントエンドデザインにはKilo CodeとClaude Codeどちらが良いですか？
どちらも優れています。Claude Codeは、コードベースを踏まえた具体的なデザイン判断で知られています。Kilo Codeの強みは、オープンソースかつモデル非依存でBYOKに対応しており、モデルを自分で選べることです。多くのチームは両方を使っており、OpenDesignならデザインワークフローを変えずにエージェントを切り替えられます。
Kilo CodeをFigmaに接続するにはどうすればよいですか？
KiloのMCPマーケットプレイスまたはMCP設定からFigma MCPサーバーを追加してください。これにより、Kiloはコンポーネント、変数、レイアウトデータなど実際のデザインコンテキストを取得できるようになり、生成されるコードは近似ではなく元のデザインと一致します。
Kiloで最初のデザインタスクを始める
まずは小さなタスクから始めて往復のやり取りを確認し、その後に本番のブリーフを持ち込んでください。ご自身の環境に合ったオプションを選択してください。このページは環境を自動検出しません。