デザインのための Kimi CLI。

Kimi CLI とは実際に何か

Kimi CLI は Moonshot AI がターミナル向けに提供するオープンソース（Apache-2.0）の AI エージェントです。リポジトリを読み取り、ファイルを編集し、シェルコマンドを実行し、ファイルを検索し、ウェブページを取得し、得られたフィードバックから次のステップを選びます。行を補完するだけでなく、自然言語のタスクから計画し作業を検証します。Python 製のツールで、uv でインストールし、舞台裏で Kimi K2 モデルファミリーを駆動します。

デザイン作業では二つの特性が際立ちます。Kimi K2 モデルはエージェント型で長期的なコーディングとツール使用のために明確にチューニングされているため、エージェントが複数ステップのビルドを動作する結果まで運べること。そしてコンテキストウィンドウが最近の K2 リリースで最大 25.6 万トークンに達し、デザインシステム、コンポーネントライブラリ、参照セット全体を要約して切り捨てるのではなく一度に保持できるほど大きいことです。

• コンテキストファイル: Kimi CLI は永続的なプロジェクトコンテキストとして AGENTS.md ファイルを読み取ります。ここがデザイン規約・トークン・レビューチェックリストをエンコードする自然な場所です。まだ無いプロジェクトでは /init を実行して雛形を作れます。
• MCP、ACP＋サブエージェント: /mcp-config で MCP サーバーを会話的に管理し、Agent Client Protocol（kimi acp）でセッションを Zed や JetBrains に公開し、組み込みの coder・explore・plan サブエージェントを隔離されたコンテキストで起動できます。
• ログインまたは BYOK: 初回起動時、/login で OAuth（Kimi Code）による認可、または自分の Moonshot API キーの入力ができます。Kimi のプラットフォームは OpenAI 互換および Anthropic 互換のエンドポイントも公開しています。

• ベンダー：Moonshot AI
• 認証情報：Moonshot API キー（BYOK）、または Kimi Code による OAuth ログイン
• ライセンス：Apache-2.0、オープンソース

なぜエージェント型 K2 モデルと大きなコンテキストがデザインに合うのか

Kimi CLI のデザイン上の強みは二つのモデル特性から来ます。ただし、どのエージェントでも同じく、センスは人間が供給しなければなりません。

• エージェント型で長期的なコーディング: Kimi K2 モデルはツール使用と複数ステップの作業のために最適化されているため、エージェントは参照素材とブリーフを受け取って、最初の下書きで止まるのではなく、実際に UI を構築・実行・洗練できます。
• 大きなコンテキストウィンドウ: 最近の K2 リリースで最大 25.6 万トークンということは、デザインシステム全体、トークン、多数の参照状態が一度に収まることを意味します。そのためエージェントは一回限りのスタイルを発明せず、あなたの本物のプリミティブを再利用します。
• AGENTS.md の規約: AGENTS.md（に加えて Figma のような MCP サーバー）がエージェントをあなたのトークン・コンポーネント・本物の仕様へ向けるので、既定の見た目ではなくブランドに沿って作業します。

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

デザイン作業のために Kimi CLI をゼロからセットアップする

まっさらなマシンから、UI を構築・検証できる Kimi CLI までの全行程はこちらです。

# 1. Install Kimi CLI (uses uv; Python 3.12–3.14, 3.13 recommended)
curl -LsSf https://code.kimi.com/install.sh | bash
# or, if you already have uv:
uv tool install --python 3.13 kimi-cli

# 2. Start it in your project and authenticate on first run
cd your-project
kimi              # then run /login: OAuth via Kimi Code, or paste a Moonshot API key

# 3. Generate project context
/init             # scaffolds an AGENTS.md for this project

# 4. Wire an MCP server (optional, e.g. Figma for design handoff)
/mcp-config       # add, edit, and authenticate MCP servers conversationally

• デザインルールをエンコードする: トークン・プリミティブ・規約を AGENTS.md に入れ、Kimi をそこへ向けます。そうすれば出力が平凡な既定の見た目に落ちるのではなく、ブランドに合致します。
• ブラウザ検証を追加する: Playwright またはブラウザ MCP を接続し、Kimi が本物のブラウザで描画してブレークポイント横断で出力を確認するようにします。ビルドが通ることを確認するだけで終わらせないために。

参照から UI へのワークフロー

Kimi CLI で最もレバレッジの高いデザインループは、参照素材を動作するレスポンシブな UI に変え、一致するまで反復することです。エージェントに参照素材を与え、描画した出力を本物のブラウザでそれらと照らし合わせさせます。

1. 手元にある最も明確な参照から始めましょう。そして 1 枚のヒーロー画像だけでなく、複数の状態（デスクトップとモバイル、ホバー、空、ローディング）を含めます。
2. プロンプトでは具体的に。曖昧なプロンプトは、強力なエージェントでも平凡な UI を生みます。
3. デザインシステムと規約を AGENTS.md に保持し、トークンと正規のプリミティブがどこにあるかを Kimi に伝えます。
4. 開発サーバーを起動し、Kimi に本物のブラウザで描画させ、ブレークポイントへリサイズして結果を確認させます。
5. Kimi に実装を参照と照らし合わせさせて反復します。単にビルドが通ることを確認するだけにしません。

Kimi を参照素材と開発サーバーに向け、具体的な制約を与えます：

kimi
# in the prompt:
> Implement the design in ./references (reference-desktop.png,
  reference-mobile.png) using React + Vite + Tailwind + TypeScript.
  Reuse my existing design-system components and tokens from AGENTS.md.
  Match spacing, layout, and hierarchy; make it responsive.
  Run the dev server, render it in the browser, and iterate until it
  matches the references across breakpoints.

プロンプトは小さく焦点を絞り、良い反復はコミットし、悪い反復はリバートして（リバートした際は Kimi に伝えて）、各パスがきれいなベースの上に積み上がるようにします。Kimi CLI は、フローを言葉で説明しにくいときに、短い画面録画やデモクリップを受け取ることもできます。

AGENTS.md、MCP、サブエージェント

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

• AGENTS.md のコンテキスト: プロジェクトのルールはリポジトリのルートにある AGENTS.md に存在します。これはあなたのデザイン規約の永続的な置き場であり、実行のたびに読まれます。そして他のエージェントも使う同じポータブルな形式です。
• MCP サーバー: /mcp-config で MCP サーバーを会話的に追加します。これはデザインコンテキストや外部ツール、最も関連が深いものとしては Figma MCP サーバーを持ち込むためのポータブルな手段で、Kimi に限らず複数のエージェント間で機能します。
• サブエージェントとプラグインマーケットプレイス: 組み込みの coder・explore・plan サブエージェントを隔離されたコンテキストで起動し、マーケットプレイスや任意の GitHub リポジトリからスキル・MCP サーバー・データソースをインストールして、参照素材を集め検証ループを回せます。

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

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

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

コミュニティで繰り返される結論は、センスは人間から来るというものです。スキル・参照素材・制約がなければ、どれも平凡な美的傾向に落ちます。それこそが解くべき本当の課題であり、それはモデルの形ではなくデザインツールの形をしています。

落とし穴と「AI スロップ」感を避ける方法

AI 生成デザインに対する最も一般的な不満は、平凡に見えるというものです。ぼんやりしたグラデーション、浮いたパネル、過大な角丸、大げさな影、「AI が作ったと叫ぶ」ような Inter とパープルの雰囲気。報告されている他の問題には、崩れたモバイルレイアウトや、指示文が UI コピーに漏れ出ることなどがあります。これらはどれも Kimi CLI 固有のものではなく、どのエージェントであれキュレーションされたデザインコンテキストなしで動かしたときに起こることです。

• 美的スキルを追加する: キュレーション済みのデザインスキルは、エージェントに既定の見た目ではなく本物の方向性へ踏み込ませます。
• 本物のブラウザで検証する: Kimi にブレークポイント横断で描画・自己チェックさせ、モバイルでレイアウトが静かに崩れないようにします。
• トークンと参照素材を供給する: 本物のデザイントークンと参照スクリーンショットは、出力品質に対する単一で最大のレバーです。
• AGENTS.md にルールをエンコードする: 「ヒーローカードは禁止、書体は最大 2 種、ブランド優先の階層」といった様式ルールを、エージェントが実行のたびに読む場所に入れます。

どの緩和策も、エージェントにキュレーションされたデザインコンテキストを与えることに尽きる点に注目してください。そのコンテキストをプロジェクトごとに手作業で維持すること、それこそ Open Design が取り除く骨折り仕事です。

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

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

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

同じ Kimi CLI エージェント、同じキー。そこに本物でポータブルなオープンソースのデザインワークフローが加わります。ローカルファーストで Apache-2.0 なので、あなたの作業や認証情報に関する何も、マシンの外へ出ません。

よくある質問

1. 01 Kimi CLI は本当にデザイン作業をこなせますか？ +

   はい。美的スキル、デザインシステム、そして本物の参照画像をコンテキストに入れれば、Kimi CLI は本番品質のレスポンシブな UI を生み出し、そのエージェント型 Kimi K2 モデルが出力を参照に対して描画・検証できます。そのコンテキストがないと平凡な見た目に落ちがちで、それこそ Open Design が埋めるギャップです。

2. 02 Kimi CLI でデザインするのに料金は必要ですか？ +

   自分の認証情報を持ち込みます。Kimi Code の OAuth ログインで認可するか、Moonshot API キー（BYOK）を貼り付けます。課金は Moonshot のプラットフォームによります。いずれにせよ Open Design はあなたの認証情報を決してプロキシしません。

3. 03 Kimi CLI が特にデザインに向いている理由は？ +

   二つあります。Kimi K2 モデルはエージェント型で長期的なコーディングとツール使用のためにチューニングされているため、エージェントが動作する結果まで構築・洗練できること。そしてコンテキストウィンドウが最大 25.6 万トークンに達し、デザインシステムと参照セット全体を一度に保持できること。どちらも役立ちますが、センスは依然としてあなたが供給するデザインシステム、スキル、参照素材から生まれます。

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

   どちらも強力です。Claude Code は具体的でコードベースを把握したデザイン判断で知られ、Kimi CLI の強みはそのエージェント型 Kimi K2 モデルと、BYOK の経済性を伴う大きなコンテキストです。多くのチームは両方を使います。Open Design なら、デザインワークフローを変えずにエージェントを切り替えられます。

5. 05 Kimi CLI を Figma に接続するには？ +

   Kimi CLI 内で /mcp-config を実行して Figma MCP サーバーを追加し認証します。すると Kimi は本物のデザインコンテキスト — コンポーネント、変数、レイアウトデータ — を取り込めるので、生成されるコードは近似ではなくソースに合致します。

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

   いいえ。Kimi CLI は Moonshot AI の製品です。Open Design は独立したオープンソースプロジェクトで、それをファーストパーティのアダプターとしてサポートします。Kimi は Moonshot AI の商標です。

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

   はい。Open Design はローカルファーストで Apache-2.0 です。あなたのファイル、成果物、DESIGN.md はあなた自身のリポジトリに留まり、Moonshot の認証情報はあなたのエージェントが直接使い、Open Design のサーバーを経由してルーティングされることは決してありません。