102.7K+ダウンロード
Kimi OpenDesign

OpenDesign で
Kimi と
デザインする。

OpenDesignでKimi CLIを使ってインターフェースをデザインする方法：入力としての参考スクリーンショット、ルールブックとしてのAGENTS.md、ブリーフからレビュー済みファイルまでの通知設定タスク1件、そして始める前に知っておくべき制限について解説します。

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

このKIMIページの3つのルート

Kimiガイドで開始点を選ぶ

このガイド・UIデザイン

Kimiでブリーフをプロダクトインターフェースに変える

以下で扱うもの：ブリーフ、参考画像、デザインルール、そしてプレビューで確認するHTMLの成果物。

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

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

クリーンなマシンから、UIを構築し実際のブラウザで検証するKimi CLIまでの全行程。

セットアップに進む 比較

Kimiとほかのエージェントを比較する

Kimiのエージェント型K2ターンと大規模コンテキストが、デザイン作業においてCodex、Claude Code、Cursorとどこで差別化されるか — そして別のエージェントの方が適しているのはどんな場合か。

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

Kimiによる完結した1つのデザインタスク

Kimiの1タスク：ブリーフ入力、インターフェース出力

通知設定のジョブをフルループで追う：あなたが渡すブリーフと制約、返ってくる成果物、そして依然としてあなたに残るチェック。以下のインターフェースはこのページ用のイラストとして作られたもので、Kimiセッションからキャプチャしたものではありません。

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

ブリーフ

コラボレーションアプリの通知設定画面をデザインする：チャネル（メール、プッシュ、アプリ内）、静音時間、プロジェクトごとの上書き。添付の参考資料からトーンを取り入れ、レイアウトは真似しない。デスクトップとスマートフォン。

  • デザインシステムOpenDesign ペーパーキャンバス — Albert Sans、単一のグリーンアクセント
  • ブレークポイント1440pxデスクトップと390pxスマートフォン、横スクロールなし
  • インタラクショントグル、静音時間用のタイムピッカー、展開可能なプロジェクトごとの行
  • 出力自己完結型HTMLファイルで、data-od-idフックが安定していること

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

  • あなた

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

  • Kimi

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

  • OpenDesign

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

  • レビュー

    視覚的階層、8pxグリッドの間隔、両方のブレークポイント、すべてのインタラクションが引き渡し前にチェックされる。

3Kimiの成果物：1440pxと390pxの通知設定

Kimiの成果物：1440pxと390pxの通知設定 — デスクトップ
参考例

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

レイアウト

グリッドとスペーシング

セクション、行、保存アクションが8pxグリッドに乗る；タイムピッカーがトグルと揃う。

階層

視覚的階層

チャネル名がヘルパーテキストより優先され、アクセントは有効なトグルにのみ表示される。

レスポンシブ

モバイルレイアウト

セクションはセグメント化スイッチに折りたたまれ、各行は右側に単一のトグルを保つ。

インタラクション

インタラクションの確認

チャンネルを切り替え、休止時間帯を設定し、1つのプロジェクトの上書き設定を展開します。

適合性

Kimiが適する場面 — そして適さない場面

Kimiが適しているケース

  • エージェント型の参考資料 → UI。長期的なKimi K2コーディングが参考資料をレスポンシブマークアップに変え、実際のブラウザでレンダリング結果を参考資料と照合する。
  • 256kトークンコンテキスト。デザインシステム、コンポーネントライブラリ、参考資料セットがすべて一度に収まり、出力は実際に持っているプリミティブを再利用する。
  • AGENTS.md + MCP。規約はコンテキストファイルで運ばれ、Figma MCPサーバーが実際のデザインコンテキストをコードに取り込む。
  • オープンかつBYOK。Apache-2.0、OAuthログインまたは自分のMoonshot APIキーで認証、OpenAIおよびAnthropic互換のエンドポイントも併設。

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

  • 編集可能なベクターファイルが必要。返ってくるのはHTMLであり、編集可能なデザインドキュメントではない — 必要なアセット形式には別のベクターワークフローを検討しよう。
  • 参考資料も制約もない。デザインシステムや例がなければ、出力は汎用的な見た目に流れる；生成前にブリーフを書こう。
  • このエージェントが必要とする認証情報がない。自分のMoonshot APIキーが必要。OpenDesignは認証情報を提供もプロキシもしない。
  • チームがQwenやDeepSeekで作業している。それらのエージェントには独自のページがある；ワークスペースは引き継がれるが、セットアップは引き継がれない。関連エージェントを参照。

互換性

開始前に必要なKimiの要件

ここでの内容はすべて、OpenDesignデスクトップアプリを通じて接続されたKimiに関するもの。公開参考資料は2026年9月6日に確認済み。

ツールの範囲Kimi, by Moonshot

Kimi CLIはMoonshot AIのオープンソース（Apache-2.0）ターミナルエージェントで、Kimi K2モデルシリーズ上で動作する：コードベースを読み、ファイルを編集し、コマンドを実行し、ファイルを検索し、ウェブを取得する。このページはOpenDesign内でKimiを使ってインターフェースをデザインすることについてであり、Kimi自身のインターフェースについてではない。OpenDesignのセットアップノートに利用可能なエージェントが記載されている。

アカウントと認証Moonshot APIキー（BYOK）

Moonshot APIキー（BYOK）。これで認証すると、認証情報はあなたのマシンに留まる。このページでは割当量や価格は約束されていない。

システムとバージョンデスクトップアプリまたはソース

デスクトップビルドはダウンロードページにある。ソースクイックスタートにあるNode.jsとpnpmの要件は、ソースから実行する場合のもので、デスクトップパッケージのインストールには関係ない。互換性のある最小Kimiバージョン：ここでは確認されていない。

接続確認成功の目安

インストールしたバージョンに表示される接続手順に従い、その後小さなものを実行する。Kimiが処理し、成果物が開くことを確認する；ダウンロードだけでは接続が機能する証明にはならない。

デスクトップアプリから始める

3ステップでできるKimiのセットアップ

ダウンロードから始め、インストールしたバージョンのKimiセットアップを完了し、その後小さなものを確認する。このパスではOpenDesignをソースからビルドする必要はない。

  1. 1

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

    自分のマシン用のパッケージを選び、インストールし、アプリを開く。

    OpenDesignをダウンロード
    チェックポイント
    デスクトップアプリが開く。すでにインストール済み？先に進もう — 再度ダウンロードする必要はない。
  2. 2

    Kimiの接続を準備する

    インストールしたバージョンに付属するKimiの指示に従う。Moonshot APIキー（BYOK）で認証する — 認証情報はあなたのマシンに留まる。

    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

    公開ガイドのKimiセットアップノートからの抜粋；最新のコマンドはベンダードキュメントで確認すること。

    チェックポイント
    意図したエージェントとアカウントを確認する。利用できない場合は、より大きなタスクに拡大する前に互換性を確認する。
  3. 3

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

    頭に留めておけるブリーフを与える。そうすれば、ループ全体 — 1回のリビジョンを含めて — が判断可能なままになる。

    スターターブリーフ

    プロフィールフォームと保存確認を備えた設定画面を作成してください。私のデザインルールを使用し、デスクトップとモバイルの幅で確認してください。

    チェックポイント
    結果を開き、保存状態を試し、1つの具体的な変更を依頼する。生成はレビューを開始する；終わらせるものではない。

代わりにOpenDesignをソースから実行する？テクニカルクイックスタートに従う。

Kimiのデザインワークフロー

ブリーフからレビュー済みKimiファイルまでの5ステップ

1つの通知設定画面を、あなたのブリーフから検証済みのファイルまで運ぶ。各ステップは、あなたの入力、Kimiの作業、OpenDesignの貢献、あなた自身のチェックを分離する。

  1. 1

    デザインブリーフ

    3〜6行の平易な言葉。その画面が誰のためのものか、何をする必要があるか、どのプラットフォームが重要かを述べる。

    • あなたあなたがブリーフを書き、参考スクリーンショットがあれば添付する。
    • KimiKimiはブリーフとプロジェクトのAGENTS.md指示ファイルを読み、要求が曖昧な場合は質問する。
    • OpenDesignOpenDesignがプロジェクト、プロンプト画面、成果物タイプに合ったスキルを提供する。
    • 確認ブリーフが受け入れ基準を明記しているか確認する。生成前に書く方が、後から追加するよりコストが低い。
  2. 2

    デザイン制約

    デザインシステムと少数の厳格なルール。その組み合わせが、出力を汎用的ではなくブランドに沿ったものに保つ。

    • あなたデザインシステムを選択し、次にブレークポイントと必ず表示すべきコンポーネントを述べる。
    • KimiKimiはコードを書く前に、DESIGN.mdのトークンとポスチャールールをコンテキストに読み込む。
    • OpenDesignOpenDesignがデザインシステムライブラリを提供し、あなたの選択をスキルテンプレートにバインドする。
    • 確認あなたのチェック：トークンがブランドに一致する — 1つのアクセント、正しいフォント、正しい半径。
  3. 3

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

    Kimiは1つの自己完結型HTMLファイルを生成する — レイアウト、スタイル、インタラクション、安定したフック。

    • あなたあなたの役割は待つか、明確化の質問に答えること。設定は不要。
    • KimiKimiはセクションを計画し、HTML、CSS、JavaScriptを書き、ファイルを実行し、失敗を修復する。
    • OpenDesignOpenDesignが成果物をプロジェクトフォルダに保存し、プレビュー用にインデックスする。
    • 確認まだ何もない — レンダリングされてからファイルを評価する。ソースを読んで評価するのではない。
  4. 4

    プレビュー

    OpenDesign が指定した幅でファイルをレンダリングします。ここでデザインを判断します。

    • あなたブレークポイントを切り替え、インタラクションを試し、個々の要素にコメントします。
    • KimiKimi がプレビューのコメントを読み、次のリビジョンを準備します。
    • OpenDesignOpenDesign がプレビューをレンダリングし、コメントと編集の対象となる data-od-id を公開します。
    • チェック階層、コントラスト、390px でのオーバーフロー、フォーカス状態、アクセントが控えめに保たれているかを確認します。
  5. 5

    修正と検証

    プレビュー内の要素を指して変更を依頼します。各リビジョンは新しいファイルになり、通知なしに上書きされることはありません。

    • あなたコメントをリクエストに変え、作業の完了を判断します。
    • KimiKimi が変更をその場で適用し、ファイルを再実行します。
    • OpenDesignOpenDesign はバージョンを並べて保持し、完了時に画像または HTML をエクスポートします。
    • チェック変更された領域だけを再確認し、その後、各ブレークポイントでページ全体を 1 回確認します。

リソース

Kimiのデザインリソース

スキル

デザインスキル

Kimi が OpenDesign で生成できる成果物の種類 — 種類ごとにスキルがあります。

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

デザインシステム

Kimi の生成を始める前にバインドするブランドトークンとコンポーネント。

システムを見る テンプレート

テンプレート

デッキ、ランディングページ、プロダクト画面のための出発点です。

テンプレートを見る

制限事項

Kimi の制限、手動チェック、フォールバック

  • 対象範囲Kimi K2 モデルはエージェント型の長期的なコーディングに調整されており、コンテキストウィンドウは最大 256k トークンに達し、デザインシステム全体を一度に保持するのに十分です。範囲の注記: このページは OpenDesign に接続されたエージェントとしての Kimi を扱い、Kimi のすべての機能を網羅するものではありません。
  • 利用制限使用制限とコストは、持ち込む認証情報（Moonshot API キー）に依存します。ここでは無料枠の主張は行いません。
  • ネットワークプロジェクトファイルはローカルにありますが、推論はオフラインではありません。機密性の高い入力を送信する前に、プロバイダー設定とデータポリシーを確認してください。
  • 出力は HTML です返ってくるのは HTML ファイルであり、ベクターデザインドキュメントではありません。
  • 手動レビューアクセシビリティ、実際のコンテンツ、ブランド適合性、インタラクションの正確性をプレビューで確認します。エージェントが実行する自己チェックはあくまで一次確認です。
  • フォールバックエージェントが利用できない場合やタスクが失敗した場合は、インストール済みバージョンの接続手順と認証を参照してください。設定を変更する前に、エラーと最後に正常動作した成果物を保存してください。

よくある質問

KimiとOpenDesignに関するよくある質問

Kimi CLI は実際にデザイン作業をこなせるのか？
できます — 美的スキル、デザインシステム、そして実際の参照画像をコンテキストとして与えれば、Kimi CLIは本番品質のレスポンシブなUIを生成できます。そのエージェント的なKimi K2モデルは、出力を参照画像と照らし合わせてレンダリング・検証することも可能です。そのコンテキストがない場合、一般的な見た目に陥りがちで、そこをOpenDesignが補います。
Kimi CLI でデザインするには料金を支払う必要があるのか？
ご自身の認証情報を使用します。Kimi CodeのOAuthログインで認証するか、Moonshot APIキーを貼り付けます（BYOK）。料金はMoonshotのプラットフォームで課金されます。いずれの場合も、OpenDesignがお客様の認証情報を代理で扱うことはありません。
Kimi CLI がデザインに適している理由は？
2つの理由があります。Kimi K2モデルはエージェント的な長時間コーディングとツール利用に合わせて調整されており、エージェントが動作する成果物まで構築・改善できること、そしてコンテキストウィンドウが最大256kトークンに達し、デザインシステムと参照セット全体を一度に保持できることです。どちらも役立ちますが、それでもセンスは、お客様が用意するデザインシステム、スキル、参照素材から生まれます。
フロントエンドデザインにはKimi CLIとClaude Codeのどちらが良いですか？
どちらも優れています。Claude Codeは、コードベースを踏まえた具体的なデザイン判断で知られています。Kimi CLIの強みは、そのエージェント的なKimi K2モデルと、BYOKによる経済性を伴う大きなコンテキストです。多くのチームは両方を使用しており、OpenDesignを使えば、デザインワークフローを変えることなくエージェントを切り替えられます。
Kimi CLI を Figma に接続するには？
Kimi CLI内で/mcp-configを実行し、Figma MCPサーバーを追加・認証してください。これにより、Kimiはコンポーネント、変数、レイアウトデータといった実際のデザインコンテキストを取得できるようになり、生成されるコードは近似ではなく元のソースに一致します。
Kimi CLI とは実際に何か
Kimi CLIは、Moonshot AIがターミナル向けに提供するオープンソース（Apache-2.0）のAIエージェントです。リポジトリを読み取り、ファイルを編集し、シェルコマンドを実行し、ファイルを検索し、Webページを取得し、得られたフィードバックから次のステップを選択します — 単に行を補完するのではなく、自然言語のタスクから作業を計画し検証します。Pythonツールであり、uvでインストールされ、背後でKimi K2モデルファミリーを動かします。

デザイン作業において、2つの特性が際立っています。Kimi K2モデルは、エージェント的で長期的なコーディングとツール使用に明示的に調整されているため、エージェントは多段階のビルドを動作する結果まで遂行できます。また、最近のK2リリースではコンテキストウィンドウが最大256kトークンに達し、デザインシステム全体、コンポーネントライブラリ、参照セットを要約して失うのではなく、一度に保持するのに十分な大きさです。

コンテキストファイル: 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 APIキー（BYOK）、またはKimi Code経由のOAuthログイン

ベンダー: Moonshot AI

ライセンス: Apache-2.0、オープンソース
なぜエージェント的K2モデルと大きなコンテキストがデザインに適しているのか
Kimi CLIのデザイン上の強みは、2つのモデル特性から来ています — しかし、すべてのエージェントと同様に、センスは依然として提供される必要があります。

エージェント的で長期的なコーディング: Kimi K2モデルはツール使用と多段階の作業に最適化されているため、エージェントは参照とブリーフを受け取り、最初のドラフトで止まるのではなく、実際にUIを構築、実行、改良できます。

大きなコンテキストウィンドウ: 最近のK2リリースでは最大256kトークンに達するため、デザインシステム全体、トークン、多くの参照状態が一度に収まり、エージェントは一度限りのスタイルを発明するのではなく、あなたの実際のプリミティブを再利用します。

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

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

教訓は、すべてのエージェントが教える同じものです: Kimi CLIはデフォルトではセンスを持っていません。制約 — デザインシステム、美的スキル、具体的な参照 — を与えると、良いデザインを生み出します。OpenDesignはまさにそれらの入力をパッケージ化しており、だからこそ両者が適合するのです（詳細は以下）。
ゼロからデザイン用に Kimi CLI をセットアップする
セットアップの順序: インストール → 認証 → AGENTS.md の設定 → スキルの追加 → ブラウザ検証の有効化。

デザインルールをコード化する: トークン、プリミティブ、規約を AGENTS.md に置き、Kimi にそれらを参照させます。そうすることで、出力が汎用的な見た目にデフォルトせず、ブランドに一致します。

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

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

# 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
以前のガイドに記載された過去のコマンド例です。現在の構文はリンク先のベンダードキュメントで確認してください。
参照から UI へのループ
Kimi CLI で最も効果の高いデザインループは、リファレンス素材を動作するレスポンシブ UI に変え、一致するまで反復することです。つまり、エージェントにリファレンスを渡し、実際のブラウザでレンダリングした出力をリファレンスと比較させます。

できるだけ明確なリファレンスから始め、1 枚のヒーローショットだけでなく、複数の状態（デスクトップとモバイル、ホバー、空、読み込み中）を含めます。

プロンプトでは具体的にします。曖昧なプロンプトは、強力なエージェントでも汎用的な UI を生み出します。

デザインシステムと規約を AGENTS.md に保ち、トークンと正規のプリミティブがどこにあるかを Kimi に伝えます。

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

Kimi に実装をリファレンスと比較させることで反復します。ビルドできることを確認するだけではいけません。

Kimi にリファレンスと開発サーバーを指定し、具体的な制約を与えます。

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

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.
以前のガイドに記載された過去のコマンド例です。現在の構文はリンク先のベンダードキュメントで確認してください。
AGENTS.md、MCP、サブエージェント
3つの拡張ポイントがKimi CLIを持続的なデザイン作業に実用的にし、そのすべてがオープンなデザインワークフローにきれいに対応します。

AGENTS.mdコンテキスト: プロジェクトのルールはリポジトリのルートにあるAGENTS.mdにあります。これはデザイン規約の永続的な拠り所であり、実行のたびに読み込まれます — そして他のエージェントが使用するのと同じポータブルな形式です。

MCPサーバー: /mcp-configを使って会話形式でMCPサーバーを追加できます — デザインコンテキストと外部ツールを持ち込むためのポータブルな方法で、最も関連性が高いのはFigma MCPサーバーであり、Kimiだけでなくエージェント間で機能します。

サブエージェントとプラグインマーケットプレイス: 組み込みのcoder、explore、planサブエージェントを分離されたコンテキストで派遣し、マーケットプレイスまたは任意のGitHubリポジトリからスキル、MCPサーバー、データソースをインストールして、参照を収集し検証ループを実行します。

これらはポータブルでマルチエージェントな機能です — まさにOpenDesignがプロジェクトごとに再作成するのではなく、オーケストレートするために構築された種類のものです。
Kimi CLI vs Codex vs Claude Code vs Cursor vs Gemini CLI デザイン向け
デザイン作業に単一の勝者はいません — 各エージェントには異なる強みがあり、経験豊富なチームはそれらを組み合わせて使います。公平な要約:

Kimi CLI — 長期的なコーディングとツール使用に調整されたエージェント的なKimi K2モデル、大規模コンテキスト; オープンソースかつBYOK — マルチステップビルドとデザインシステム全体を手頃な価格でコンテキストに保持

Codex — フロントエンドスキルによる強力なビジュアルポリッシュ; サンドボックス化された非同期ビルド — 委任された非同期ビルドとポータブルなAGENTS.mdルール

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

Cursor — ライブプレビューとインライン編集を備えたビジュアルなビルドアンドシーループ — IDE内での緊密な反復と監視のUI作業

Gemini CLI — 強力なマルチモーダル画像理解と1Mトークンのコンテキスト; 無料枠 — スクリーンショットの多い作業と非常に大きなコンテキスト

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

エージェント — デザインの強み — 最適な用途
落とし穴、そして「AIスロップ」な見た目を避ける方法
AI生成デザインに対する最も一般的な不満は、それが汎用的に見えることです — 柔らかなグラデーション、浮遊するパネル、大きすぎる角丸、ドラマチックな影、Interと紫の雰囲気で、「これはAIが作った」と叫んでいるような見た目です。他に報告されている問題には、モバイルレイアウトの崩れや、指示がUIコピーに漏れ出すことなどがあります。これらはいずれもKimi CLIに固有のものではなく、キュレーションされたデザインコンテキストなしでエージェントが動作したときに起こることです。

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

実際のブラウザで検証する：Kimiにブレークポイント全体でレンダリングと自己チェックを行わせ、モバイルでレイアウトが黙って崩れないようにする。

トークンと参照を提供する：本物のデザイントークンと参照スクリーンショットは、出力品質を左右する最大の要因です。

AGENTS.mdにルールをエンコードする：「ヒーローカードなし、書体は最大2つ、ブランド優先の階層」といったスタイルルールを、エージェントが毎回読む場所に置く。

すべての緩和策は、エージェントにキュレーションされたデザインコンテキストを与えることにある点に注目してほしい。そのコンテキストをプロジェクトごとに手作業で維持することこそ、OpenDesignが取り除く苦労である。
OpenDesign内でKimi CLIを使って設計する
OpenDesignは、上記のワークフローが繰り返し求めているオープンソースのデザインレイヤーです。Kimi CLIをファーストパーティのアダプターとして扱い、キュレーションされたスキルとデザインシステムライブラリ、構造化されたレンダーパイプライン、ローカルデスクトップUIで包み込みます — そのため、Kimiを良くするデザインコンテキストが最初の実行から存在し、毎回手作業で組み立てる必要はありません。どちらもオープンソースでローカルファーストなので、この組み合わせは自然に適合します。

Moonshot APIキー（BYOK）で認証します — 認証情報はあなたのマシンに留まり、私たちを経由してプロキシされることはありません。

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

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

同じKimi CLIエージェント、同じキー — それに加えて、その周囲に本物でポータブルなオープンソースのデザインワークフローがあります。ローカルファーストかつApache-2.0なので、あなたの作業や認証情報がマシンから出ることはありません。

OpenDesignをインストールし、エージェントとしてKimi CLIを選択します。
OpenDesignはMoonshot AIと提携していますか？
いいえ。OpenDesign は独立しており、Kimi は Moonshot AI の商標です。