102.7K+ダウンロード
Kilo OpenDesign

OpenDesign で
Kilo と
デザインする。

OpenDesignでKilo Codeを使ってインターフェースをデザインする方法：選ぶモデル、独自のルールとモード、スクリーンショットからレビュー済みファイルまでの1つのプロダクトページタスク、そして始める前に知っておくべき限界について解説します。

OpenDesignをダウンロード セットアップに進む

KILOガイドへの3つのルート

Kiloの出発点を決める

このガイド・UIデザイン

KiloでプロダクトインターフェースをブリーフからHTMLへ

このページでは、ブリーフ、参考資料、デザインルール、そしてレビュー済みのHTML成果物を扱います。

このガイドを読む セットアップ

Kiloをゼロからセットアップする

クリーンなマシンからKilo CodeがUIを構築・検証するまでの完全なルート。

セットアップに進む 比較

Kiloを他のエージェントと比較する

デザイン作業においてKiloがCodex、Claude Code、Cursorとどこで異なるか、そして別のワークフローが適しているのはどんな場合か。

比較を見る
このページの内容 例
  1. 例
  2. 適性
  3. 互換性
  4. セットアップ
  5. ワークフロー
  6. リソース
  7. 制限事項
  8. FAQ

完全なKiloデザインタスク1件

Kiloのデザインタスク1件：ブリーフからインターフェースまで

タスクは、あなたが渡すブリーフと制約から始まり、Kiloが返す成果物を経て、完了とする前にあなたが実行する確認へと進みます。以下のインターフェースはこのページ用に作成した例示であり、記録されたKiloの実行ではありません。

1設計ブリーフと制約条件

ブリーフ

添付のスクリーンショットを使って、アウトドアブランドの商品詳細ページをデザインしてください：ギャラリー、価格、サイズとカラーの選択、バッグに追加、関連商品。デスクトップとスマートフォン。

  • デザインシステムAlbert Sansと、OpenDesignのペーパーキャンバス上のグリーンのアクセント1色
  • ブレークポイント1440pxデスクトップと390pxモバイル、横スクロールなし
  • インタラクションギャラリーサムネイル、オプション選択、バッグに追加、関連商品スクロール
  • 出力安定したdata-od-idフックを備えた単一の自己完結型HTMLファイル

2誰が何をするか：あなた、Kilo、OpenDesign

  • あなた

    あなたはブリーフを書き、デザインシステムを選び、受け入れ基準を設定します。

  • Kilo

    Kiloはレイアウトを計画し、HTML、CSS、JavaScriptを書き、要求に応じて修正します。

  • OpenDesign

    OpenDesignはデザインシステムとスキルを提供し、プレビューをレンダリングし、各バージョンをプロジェクトファイルとして保持します。

  • レビュー

    引き渡す前に、あなたは視覚的階層、8pxグリッドの間隔、両方のブレークポイント、すべてのインタラクションを確認します。

3Kiloの成果物：1440pxと390pxの商品ページ

Kiloの成果物：1440pxと390pxの商品ページ — デスクトップ
参考例

4ハンドオフ前のレビュー

レイアウト

グリッドとスペーシング

ギャラリーと情報は8pxグリッドに揃い、1440では情報カラムがギャラリーの高さ内に収まります。

階層

視覚的階層

名前と価格が先に来て、次にオプションが続きます。アクセントはバッグに追加ボタン用に取ってあります。

レスポンシブ

モバイルレイアウト

モバイルでの順序：ギャラリー、名前と価格、オプション、全幅ボタン。関連商品はスクロールします。

インタラクション

インタラクションの確認

テストするインタラクション：サムネイルの切り替え、サイズの選択、バッグに追加、関連アイテムのスクロール。

適合性

Kiloが向く場面 — そして向かない場面

Kilo が適しているケース

  • スクリーンショット → UIのためのモデル選択。 参照画像をレスポンシブなマークアップに最もよく変換するビジョン対応モデルをKiloに指定し、その結果を参照画像と比較します。
  • プロバイダーをまたぐBYOK。 Anthropic、OpenAI、Google、OpenRouterなどで自分のキーを使用するか、Kiloのゲートウェイを使い、コストと認証情報を自分の手元に置きます。
  • モード、カスタムルール、MCP。 計画にはArchitectモード、構築にはCodeモード、規約にはカスタムルール、実際のデザインコンテキストにはFigma MCPサーバーを使います。
  • オープンソース。 プロンプトとコンテキストのペイロードは検査可能で、隠されたものはなく、KiloはIDEまたはCLIで動作します。

別のワークフローを選ぶべきケース

  • 編集可能なベクターファイルが必要。 返ってくるのはHTMLであり、編集可能なデザインドキュメントではありません。必要なアセット形式には、別のベクターワークフローを検討してください。
  • 参照も制約もない。 デザインシステムや例がないと、出力は凡庸なものに流れます。まずブリーフを書いてください。
  • 必要な認証情報がない。 Kiloには、自分のプロバイダーAPIキー（BYOK）かKiloのゲートウェイのどちらかが必要です。OpenDesignは認証情報を提供もプロキシもしません。
  • チームがOpenCodeまたはAiderで作業している。 これらのエージェントには専用のページがあります。ワークスペースは引き継げますが、セットアップは異なります。関連エージェントを参照してください。

互換性

開始前に必要なKiloの要件

このページでは、OpenDesignデスクトップアプリ経由で接続したKiloを扱います。参照情報は2026年9月6日に確認しました。

ツールの範囲Kilo（Kilo Code, Inc. 提供）

Kilo Code, Inc.によるKilo Codeは、オープンソースの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のセットアップを完了し、その後、小さな結果を1つテストします。この手順に従う場合、OpenDesignをソースからビルドする必要はありません。

  1. 1

    OpenDesignデスクトップアプリをダウンロードする

    自分のマシンに合ったパッケージを選び、インストールし、アプリを起動します。

    OpenDesignをダウンロード
    チェックポイント
    デスクトップアプリが開きます。すでにある場合は、次のステップに進んでください。再度ダウンロードする必要はありません。
  2. 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. 3

    小さなKiloタスクを1つ実行する

    1回の修正を含め、ループ全体を判断できる程度に小さなブリーフから始めます。

    スターターブリーフ

    プロフィールフォームと保存確認を備えた設定画面を構築してください。自分のデザインルールに従ってください。デスクトップとモバイルの幅で確認してください。

    チェックポイント
    結果を開き、保存状態をテストし、その後、具体的な変更を1つ依頼します。生成されたファイルはレビューの始まりであり、終わりではありません。

代わりにOpenDesignをソースから実行するには、技術クイックスタートを参照してください。

Kiloデザインワークフロー

Kiloのデザインタスクを進む5つのステップ

1つの商品ページを、最初のブリーフから実際に検証済みのファイルまで追跡します。各ステップでは、あなたの入力、Kiloが行うこと、OpenDesignが提供するもの、そしてそのステップを締めくくる確認を示します。

  1. 1

    デザインブリーフ

    簡潔に短く — 3～6行に保ちます。その画面が誰向けで、何をする必要があり、どのプラットフォームが重要なのかを書きましょう。

    • あなたあなたがブリーフを書き、参照スクリーンショットがある場合は添付します。
    • Kiloあなたのブリーフとプロジェクトの指示ファイルを読み、詳細が曖昧な場合は推測せずに質問します。
    • OpenDesignプロジェクト、プロンプトサーフェス、成果物タイプに合ったスキルを提供します。
    • 確認ブリーフに受け入れ基準が明記されていることを確認します。今書いておく方が、後でファイルを修正するよりコストが低く済みます。
  2. 2

    デザイン制約

    デザインシステムと、いくつかの確固たるルール — それが、あなたのブランドをまとう出力と、誰のものでもあり得る出力との違いです。

    • あなたデザインシステムを選び、次にブレークポイントと必ず表示する必要があるコンポーネントを指定します。
    • Kiloマークアップを書く前に、DESIGN.mdのトークンと基本方針ルールをコンテキストに読み込みます。
    • OpenDesignデザインシステムライブラリを提供し、選択したシステムをスキルテンプレートに結び付けます。
    • 確認トークンがあなたのブランドに合っていることを確認します：アクセント1色、正しいフォント、正しい角丸。
  3. 3

    インターフェースを生成する

    Kiloは、レイアウト、スタイル、インタラクション、安定したフックを備えた自己完結型HTMLファイルを1つ書きます。

    • あなたここであなたの役割は、待つか、明確化の質問に答えることです。設定するものはありません。
    • Kiloセクションを計画し、HTML、CSS、JavaScript を書き、ファイルを実行し、失敗した箇所を修正します。
    • OpenDesign成果物をプロジェクトフォルダーに保存し、プレビューできるようにインデックスを作成します。
    • 確認まだ何もありません — ソースを読むのではなく、レンダリング結果で判断します。
  4. 4

    プレビュー

    OpenDesign は指定した幅でファイルをレンダリングします。判断はここ、プレビュー上で行われます。

    • あなた幅を変更し、インタラクションを試し、特定の要素にコメントします。
    • Kiloプレビューに残したコメントを読み、次のリビジョンを準備します。
    • OpenDesignプレビューをレンダリングし、コメントや編集を紐付けられるように data-od-id ターゲットを公開します。
    • チェック階層、コントラスト、390px でのオーバーフロー、フォーカス状態を確認し、アクセントが控えめに保たれているかを問います。
  5. 5

    修正と検証

    プレビュー内の要素を指して変更を依頼します。各リビジョンは新しいファイルとして届き、何も黙って上書きされません。

    • あなたコメントをリクエストに変換し、タスクがいつ完了するかを決めます。
    • Kilo変更をその場で適用し、ファイルを再実行します。
    • OpenDesignバージョンを並べて保持し、最後に画像または HTML をエクスポートします。
    • チェック変更された領域だけを再確認し、その後ブレークポイントごとに一度、ページ全体を確認します。

リソース

Kiloデザインリソース

スキル

デザインスキル

OpenDesign 内で Kilo が生成できる成果物の種類 — 種類ごとに 1 つのスキル。

スキルを見る デザインシステム

デザインシステム

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 Code とは何か
Kilo Code は Kilo Code, Inc. が開発したオープンソースの AI コーディングエージェントです。VS Code 拡張機能として、JetBrains IDE 内で、そしてコマンドラインインターフェースとして動作し、リポジトリを読み、ファイルを編集し、コマンドを実行し、単に行を補完するのではなく自然言語のタスクから作業を計画・検証します。その決定的な特徴はモデル非依存であることです。どのモデルで動かすかを自分で選び、プロバイダーのキーは自分で持ち込みます。

デザイン作業では、2 つの性質が際立ちます。モデル非依存であるため、参照スクリーンショットを最もよく読み取りレイアウトについて推論できる、視覚対応の強力なモデルを指定できます。そしてオープンソースかつ BYOK であるため、どのコンテキストが送信されるかを正確に検査でき、認証情報とコストを自分の管理下に保てます。

エージェントモード: Kilo には特化したモードが同梱されています — 計画のための Architect、構築のための Code、修正のための Debug、質問のための Ask — さらにカスタムモードもあり、デザインを計画してから、別々の集中したパスで実装できます。

カスタムルール + MCP: プロジェクトレベルのカスタムルールを永続的なコンテキストとして読み込み、MCP サーバー（MCP マーケットプレイス付き）をサポートするので、ライブの Figma ファイルやデザインツールのような外部コンテキストを追加できます。

自分のキーを持ち込む: Kilo は多くのプロバイダー — Anthropic、OpenAI、Google、OpenRouter など — で BYOK に対応しており、あるいはプロバイダー原価で 500 以上のモデルを公開する Kilo 自身のゲートウェイも利用できます。

認証情報: 自分のプロバイダー API キー（BYOK — Anthropic、OpenAI、Google、OpenRouter など）、または Kilo 自身のゲートウェイ

ベンダー: Kilo Code, Inc.（オープンソース）

ライセンス: オープンソース
オープンでモデルに依存しないエージェントがデザインに適している理由
Kilo Code のデザイン上の強みはオープンさとモデル選択から生まれます — しかし、どのエージェントにも言えることですが、センスはやはり供給されなければなりません。

設計上モデル非依存: モデルを自分で選ぶので、参照スクリーンショットを最もよく読む視覚対応モデルで Kilo を動かせます — そしてより良いモデルが現れたら、ワークフローを変えずに切り替えられます。

オープンで検査可能: Kilo はオープンソースなので、どのコンテキストとプロンプトが送信されるかを正確に見られます — エージェントに場当たり的なスタイルを発明させるのではなく、実際のデザインプリミティブを再利用させたいときに役立ちます。

カスタムルールに規約を: プロジェクトのカスタムルール（および Figma 用の MCP サーバー）が、エージェントをあなたのトークン、コンポーネント、実際の仕様に向けるので、デフォルトの見た目ではなくブランドに沿って作業します。

センスはあなたが提供する 3 つの入力から生まれます: デザインシステム、スキル、そして実際の参照画像です。

教訓はどのエージェントも同じです: Kilo Code はデフォルトではセンスを持ちません。制約 — デザインシステム、美的スキル、具体的な参照 — を与えたときに良いデザインを生み出します。OpenDesign はまさにそうした入力をパッケージ化しており、だからこの 2 つは相性が良いのです（詳細は後述）。
デザイン向けに Kilo Code をゼロからセットアップする
セットアップの順序: インストール → プロバイダーの接続 → カスタムルールの追加 → スキルの追加 → ブラウザ検証の有効化。

デザインルールをエンコードする: トークン、プリミティブ、規約を Kilo のカスタムルールに入れ、エージェントをそこに向けることで、出力が汎用的な見た目にデフォルトせずブランドに一致します。

ブラウザ検証を追加する: Playwright やブラウザ MCP を接続して、Kilo が実際のブラウザでレンダリングし、ビルドが通ることだけを確認するのではなくブレークポイント間で出力をチェックできるようにします。

コマンドとバージョン固有の詳細については現在のセットアップセクションを使用してください。これらは変わる可能性があります。

# 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 # 3. Add project context # create custom rules for this project's design conventions # 4. Wire the Figma MCP server (optional, for design handoff) # add it from the MCP marketplace / MCP settings
以前のガイドにあった過去のコマンド例です。現在の構文はリンクされているベンダーのドキュメントで確認してください。
スクリーンショットから UI へのループ
Kilo Code で最も効果の高いデザインループは、参照画像を動作するレスポンシブ UI に変え、一致するまで反復することです — 出力を参照と比較するために視覚対応モデルに頼ります。

手持ちの中で最も明確な視覚的参照から始めましょう — そして 1 枚のヒーローショットだけでなく、複数の状態（デスクトップとモバイル、ホバー、空、ローディング）を含めてください。

プロンプトでは具体的に。曖昧なプロンプトは、強いモデルでも汎用的な UI を生みます。

デザインシステムと規約は Kilo のカスタムルールに保ち、トークンと正規のプリミティブがどこにあるかをエージェントに伝えましょう。

開発サーバーを起動し、Kilo に実際のブラウザでレンダリングさせ、ブレークポイントにリサイズして結果を確認させましょう。

Kilo に自分の実装をスクリーンショットと比較させることで反復します — 単にビルドが通ることを確認するのではありません。

Architect モードでビルドを計画し、次に Code モードに切り替えて、参照を具体的な制約とともに添付します:

プロンプトは小さく焦点を絞り、良い反復はコミットし悪いものは元に戻して（戻したときは Kilo に伝える）、各パスがクリーンなベースの上に積み上がるようにしましょう。

# Plan in Architect mode, then build in Code mode: > Implement this design from @reference-desktop.png and @reference-mobile.png in React + Vite + Tailwind + TypeScript. Reuse my existing design-system components and tokens from the custom rules. Match spacing, layout, and hierarchy; make it responsive. Render it in the browser and iterate until it matches the references across breakpoints.
以前のガイドにあった過去のコマンド例です。現在の構文はリンクされているベンダーのドキュメントで確認してください。
モード、カスタムルール、MCP
3 つの拡張ポイントが Kilo Code を継続的なデザイン作業に実用的なものにしており、そのすべてがオープンなデザインワークフローにきれいに対応します。

モード（Architect → Code）: 画面の構造を Architect モードで計画し、Code モードで実装し、Debug モードで問題を修正します — デザイン意図と実装を分離します。カスタムモードを使えば、独自のデザインレビューパスをエンコードできます。

カスタムルール: プロジェクトのカスタムルールはデザイン規約の永続的な置き場所です — トークン、プリミティブ、レビューチェックリスト — 実行のたびに読み込まれ、エージェントがあなたのブランドに沿って作業します。

MCP サーバー: Kilo はマーケットプレイス経由で MCP サーバーをサポートします — デザインコンテキストや外部ツール、とりわけ Figma MCP サーバーを持ち込むための移植可能な方法であり、Kilo だけでなくエージェント間で機能します。

これらは移植可能でマルチエージェントな機能です — まさに OpenDesign がプロジェクトごとに再作成するのではなくオーケストレーションするために作られたものです。
デザインにおける Codex、Claude Code、Cursor、Gemini CLI との Kilo Code の比較
デザイン作業に単一の勝者はいません — 各エージェントに異なる強みがあり、経験豊富なチームはそれらを重ねて使います。公平な要約:

Kilo Code — オープンソースでモデル非依存、多くのプロバイダーで BYOK。Architect/Code モードと MCP — タスクごとに自分のモデルを選び、コストと認証情報を自分の管理下に置く

Codex — フロントエンドスキルによる強い視覚的仕上げ。サンドボックス化された非同期ビルド — 委任された非同期ビルドと移植可能な AGENTS.md ルール

Claude Code — 具体的なデザイン決定（hex、スペーシング、タイプ）とコードベースを意識した UX — フロントエンドの推論と大規模コンテキストのリファクタリング

Cursor — ライブプレビューとインライン編集による視覚的な作りながら見るループ — IDE 内での密な反復と観察を伴う UI 作業

Gemini CLI — 強いマルチモーダル画像理解と 1M トークンのコンテキスト — スクリーンショットの多い作業とデザインシステム全体をコンテキストに保持すること

繰り返し聞かれるコミュニティの評決は、センスは人間から来るというものです。スキル、参照、制約がなければ、どれも汎用的な美学にデフォルトします。それが本当に解くべき問題であり、それはモデルの形ではなくデザインツールの形をしています。

エージェント — デザインの強み — 最適な用途
落とし穴と、「AI slop」な見た目からの脱却
AI 生成デザインについて最もよくある不満は、見た目が汎用的だというものです — 柔らかなグラデーション、浮いたパネル、大きすぎる角丸、劇的な影、そして「AI がこれを作った」と叫んでいるような Inter と紫の雰囲気。他に報告されている問題には、モバイルレイアウトの崩れや、指示が UI の文言に漏れ出ることがあります。これらはいずれも Kilo Code に固有のものではなく、キュレーションされたデザインコンテキストなしでエージェントを動かしたときに起きることです。

美的スキルを追加する: キュレーションされたデザインスキルは、エージェントにデフォルトの見た目ではなく本物の方向性にコミットさせます。

実際のブラウザで検証する: 視覚対応モデルを使ってレンダリングし、ブレークポイント間で自己チェックすることで、レイアウトがモバイルで黙って壊れません。

トークンと参照を供給する: 本物のデザイントークンと参照スクリーンショットは、出力品質に対する唯一最大のレバーです。

ルールをカスタムルールにエンコードする:「ヒーローカードなし、書体は最大 2 つ、ブランド優先の階層」といったルールを、エージェントが実行のたびに読む場所に置きましょう。

どの緩和策も、エージェントにキュレーションされたデザインコンテキストを与えることだということに気づいてください。そのコンテキストをプロジェクトごとに手作業で維持することが、OpenDesign が取り除く手間なのです。
OpenDesign で Kilo Code を使ってデザインする
OpenDesign は、上記のワークフローが求め続けるオープンソースのデザインレイヤーです。Kilo Code をファーストパーティのアダプターとして扱い、キュレーションされたスキルとデザインシステムライブラリ、構造化されたレンダーパイプライン、ローカルデスクトップ UI で包みます — つまり Kilo を良くするデザインコンテキストが、毎回手作業で組み立てるのではなく最初の実行からそこにあります。どちらもオープンソースでローカルファーストなので、この組み合わせは自然に噛み合います。

自分のプロバイダーキー（BYOK）または Kilo のゲートウェイで認証します — 認証情報はあなたのマシンに留まり、当社を経由してプロキシされることはありません。

デザインシステムとスキルを選び、一貫したセンスでデッキ、プロトタイプ、ランディングページを生成します。

すべての成果物と DESIGN.md ファイルは、ホストされたクラウドではなくあなた自身のリポジトリにあります。

同じ Kilo Code エージェント、同じキー — それに加えて、本物で、移植可能で、オープンソースのデザインワークフロー。ローカルファーストでオープンソースなので、あなたの作業や認証情報がマシンの外に出ることはありません。

OpenDesign をインストールし、エージェントとして Kilo Code を選択してください。
OpenDesign は Kilo Code と提携していますか？
いいえ。OpenDesign は独立したプロジェクトです。どちらもオープンソースですが、両者は別々のものです。