デザインのための Kilo Code。

Kilo Code とは実際に何か

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

デザイン作業では二つの性質が際立ちます。モデル非依存なので、参照スクリーンショットを最もよく読みレイアウトを推論する強力なビジョン対応モデルを指定できます。そしてオープンソースで BYOK なので、どんなコンテキストが送られるかを正確に検査でき、認証情報とコストを自分の手元に保てます。

• エージェントモード: Kilo は専用モードを備えます — 計画の Architect、構築の Code、修正の Debug、質問の Ask — に加えてカスタムモードもあるので、デザインを計画してから別の焦点を絞ったパスで実装できます。
• カスタムルール + MCP: 永続的なコンテキストのためのプロジェクトレベルのカスタムルールを読み、MCP サーバ（MCP マーケットプレイス付き）に対応するので、ライブの Figma ファイルやデザインツールのような外部コンテキストを加えられます。
• 自分のキーを持ち込む: Kilo は多数のプロバイダ — Anthropic、OpenAI、Google、OpenRouter ほか — にわたる BYOK か、500 以上のモデルをプロバイダ原価で提供する Kilo 自身のゲートウェイを使えます。

• ベンダー：Kilo Code, Inc.（オープンソース）
• 認証情報：自分のプロバイダ API キー（BYOK — Anthropic、OpenAI、Google、OpenRouter ほか）または Kilo 自身のゲートウェイ
• ライセンス：オープンソース

なぜオープンでモデル非依存のエージェントがデザインに適するのか

Kilo Code のデザイン上の強みは、オープンさとモデル選択から来ます。ただし、どのエージェントも同じく、センスは人が与える必要があります。

• 設計からしてモデル非依存: モデルを自分で選べるため、参照スクリーンショットを最もよく読むビジョン対応モデルで Kilo を駆動でき、より良いものが現れたらワークフローを変えずに切り替えられます。
• オープンで検査可能: Kilo はオープンソースなので、どんなコンテキストとプロンプトが送られるかを正確に確認できます。その都度の使い捨てスタイルを発明するのではなく、本物のデザインプリミティブを再利用させたいときに役立ちます。
• 規約はカスタムルールに: プロジェクトのカスタムルール（加えて Figma 用の MCP サーバ）がエージェントをあなたのトークン・コンポーネント・実際の仕様へ指し示すので、既定の見た目ではなくブランドに沿って作業します。

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

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

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

# 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

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

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

Kilo Code で最も効果の高いデザインループは、参照画像を動作するレスポンシブな UI に変え、一致するまで反復することです。ビジョン対応モデルを頼りに出力を参照と照らし合わせます。

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

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

# 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.

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

モード・カスタムルール・MCP

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

• モード（Architect → Code）: 画面の構造を Architect モードで計画し、それを Code モードで実装し、Debug モードで問題を修正します — デザイン意図を実装から分離します。カスタムモードでは自分のデザインレビューのパスを記述できます。
• カスタムルール: プロジェクトのカスタムルールはデザイン規約の耐久性ある置き場です — トークン・プリミティブ・レビューチェックリスト — 毎回の実行で読まれ、エージェントがあなたのブランドに沿って作業します。
• MCP サーバ: Kilo はマーケットプレイス経由で MCP サーバに対応します — デザインコンテキストや外部ツール、最も関連が深いのは Figma MCP サーバを取り込む可搬な方法で、Kilo だけでなく複数のエージェントで機能します。

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

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

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

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

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

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

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

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

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

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

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

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

よくある質問

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

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

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

   Kilo Code はオープンソースで無料でインストールできます。自分のプロバイダ API キー（BYOK）を持ち込んでそのプロバイダに直接支払うか、Kilo 自身のゲートウェイをプロバイダ原価で使います。いずれにせよ Open Design があなたの認証情報をプロキシすることはありません。

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

   モデル非依存でオープンソースだからです。参照スクリーンショットを最もよく読むビジョン対応モデルで駆動でき、どんなコンテキストが送られるかを正確に検査でき、コストと認証情報を自分の手元に保てます。ただしセンスは、あなたが供給するデザインシステム・スキル・参照から来ます。

4. 04 フロントエンドのデザインには Kilo Code と Claude Code のどちらが良いですか？ +

   どちらも強力です。Claude Code は具体的でコードベースを理解したデザイン判断で知られています。Kilo Code の強みはオープンソースでモデル非依存、BYOK なので、モデルを自分で選べる点です。多くのチームは両方を使います。Open Design ならデザインワークフローを変えずにエージェントを切り替えられます。

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

   Kilo の MCP マーケットプレイスまたは MCP 設定から Figma MCP サーバを追加します。すると Kilo は本物のデザインコンテキスト — コンポーネント、変数、レイアウトデータ — を取り込めるので、生成コードは近似ではなくソースに合致します。

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

   いいえ。Kilo Code は Kilo Code, Inc. の製品です。Open Design は独立したオープンソースプロジェクトで、ファーストパーティのアダプタとしてこれをサポートします。どちらもたまたまオープンソースですが、別々のプロジェクトです。

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

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