参考リンク
Kiroに関する参考資料
Kiro のデザイン作業向けのチュートリアル、ドキュメント、ウォークスルーを、公開ガイドにまとめています。
Kiro 
OpenDesign OpenDesign で
Kiro と
デザインする。
Kiroを使ってOpenDesignでインターフェースをデザインする方法：コードを書く前に仕様を作成し、コピーとエラー処理のためのステアリングファイルを用意し、ブリーフからレビュー済みファイルまでの1つのチェックアウトタスクを実施し、開始前に知っておくべき制限事項を確認します。
KIRO の 3 つの出発点
Kiro をどこから始めるか
Kiroによる1つの完全なデザインタスク
ブリーフからインターフェースへ：Kiro のデザインタスク
1 つのタスクを最初から最後まで：あなたが渡すブリーフと制約、返ってくる成果物、完了とする前に実行するチェック。以下のインターフェースはこのページのために作られた説明用の例であり、記録された Kiro の実行ではありません。
1設計ブリーフと制約条件
ブリーフ添付の仕様に基づいて 2 ページのチェックアウトをデザインしてください：配送と支払い。注文サマリーは常に表示されたままにします。コピーとエラー処理にはステアリングファイルを使用してください。デスクトップとスマートフォン。
- デザインシステムOpenDesignのペーパーキャンバス：Albert Sans、グリーンのアクセント1色
- ブレークポイント1440px デスクトップと 390px モバイル、横スクロールバーなし
- インタラクションステップナビゲーション、住所オートコンプリート、カード検証、プロモコード欄
- 出力安定した
data-od-idフックを持つ、自己完結型のHTMLファイル1つ
2役割分担：あなた、Kiro、OpenDesign
- あなた
ブリーフを書き、デザインシステムを選び、受け入れ基準を定義します。
- Kiro
レイアウトを計画し、HTML、CSS、JavaScript を書き、要求に応じて修正します。
- OpenDesign
デザインシステムとスキルを提供し、プレビューをレンダリングし、各バージョンをプロジェクトファイルとして保存します。
- レビュー
引き渡し前に、視覚的階層、8px グリッド上の余白、両方のブレークポイント、すべてのインタラクションを確認します。
3Kiro の成果物：1440px と 390px のチェックアウトフロー
4ハンドオフ前のレビュー
レイアウト
グリッドとスペーシング
フォームとサマリーは 8px グリッドに揃えられている。サマリーはデスクトップでは追従し、スマートフォンでは折りたたまれる。
階層
視覚的階層
質問、次にフィールド、次にボタン。アクセントカラーは現在のステップだけを強調する。
レスポンシブ
モバイルレイアウト
サマリーはフォームの上にある合計 1 行に折りたたまれる。ボタンは幅いっぱいに広がる。
インタラクション
インタラクションの確認
住所エラーを発生させ、プロモコードを適用し、カートに戻る。
適合性
Kiro がタスクに適するとき、適さないとき
Kiroが適しているケース
- コードの前に仕様。 Kiro は要件、デザインドキュメント、タスクリストを事前に起草し、ビルドが確定する前にレイアウトとスコープを修正できます。
- ステアリングファイル。 あなたの標準、規約、トークンが各実行に引き継がれるため、出力はデフォルトの見た目ではなくブランドに合致します。
- エージェントフック。 ファイル保存などのイベントで自動化が起動します。記憶に頼らずに検証やレビューのステップを強制できる場所です。
- MCP と無料で開始。 Kiro CLI は外部コンテキスト用の MCP サーバーを管理し、Builder ID、Google、GitHub、または所属組織でサインインでき、プレビュー中は無料で開始できます。
別のワークフローを選ぶべきケース
- 編集可能なベクターファイルが必要。 成果物は HTML であり、編集可能なデザインドキュメントではありません。必要なアセット形式には別のベクターワークフローを検討してください。
- リファレンスも制約もない。 デザインシステムや例がないと、出力は汎用的な見た目に流れます。まずブリーフを書いてください。
- このエージェントが必要とする認証情報がない。 必要なもの：AWS Builder ID、Google、GitHub、または AWS IAM Identity Center（AWS アカウントは不要）。OpenDesign は認証情報を提供もプロキシもしません。
- チームが Cursor または Antigravity で作業している。 これらのエージェントにはそれぞれのページがあります。ワークスペースは同じままですが、セットアップは異なります。関連エージェントを参照してください。
互換性
開始前に確認すべきKiroの要件
このガイドは、OpenDesign デスクトップアプリを通じて接続された Kiro に焦点を当てています。公開リファレンスは 2026 年 9 月 6 日に確認済みです。
ツールの範囲Kiro（Amazon提供）
Kiro は Amazon（AWS）のエージェント型 AI で、IDE、CLI、Web インターフェースとして利用でき、プロトタイプから本番まで仕様駆動開発向けに設計されています。プレビュー中です。このページでは OpenDesign 経由で Kiro を使ったインターフェース設計を扱い、Kiro 自身のインターフェースは扱いません。OpenDesign の セットアップノート に利用可能なエージェントが一覧されています。
アカウントと認証AWS Builder ID、Google、GitHub、またはAWS IAM
認証オプション：AWS Builder ID、Google、GitHub、または AWS IAM Identity Center（AWS アカウントは不要）。AWS Builder ID またはその他の方法でサインインしてください。認証情報はあなたのマシン上に残ります。このページはクォータや料金について何も約束しません。
システムとバージョンデスクトップアプリまたはソース
デスクトップビルドについてはダウンロードページを参照してください。ソースのクイックスタートにある Node.js と pnpm の要件は、ソースから実行する場合にのみ適用され、デスクトップパッケージのインストールには適用されません。互換性のある最小 Kiro バージョン：ここでは確認していません。
接続確認成功の目安
インストール済みバージョンの接続手順に従い、小さなタスクを実行してください。Kiro がそれを処理し、成果物が開くことを確認します。ダウンロードしただけでは、接続が機能する保証にはなりません。
デスクトップアプリから始める
3ステップで行うKiroのセットアップ
まずダウンロードし、インストール済みバージョンの Kiro セットアップを完了してから、小さな結果を検証します。この手順では OpenDesign をソースからビルドする必要はありません。
- 1
OpenDesignデスクトップアプリをダウンロードする
お使いのコンピューター用のパッケージを選択し、インストールしてアプリを開きます。
OpenDesignをダウンロードチェックポイントデスクトップアプリが開きます。すでにインストール済みですか？次のステップに進んでください。再ダウンロードは不要です。 - 2
Kiro接続を準備する
インストール済みバージョンに用意されている Kiro の手順に従ってください。AWS Builder ID またはその他のサインイン方法で認証します。認証情報はあなたのマシン上に残ります。
Kiro CLI のドキュメント# 1. Install Kiro CLI (see kiro.dev/docs/cli for the macOS/Linux/Windows command) # 2. Authenticate — opens your browser to complete sign-in kiro-cli login # choose Builder ID, Google, GitHub, or your organization # 3. Confirm you are signed in kiro-cli whoami公開ガイドの Kiro セットアップノートより。現在のコマンドについてはベンダーのドキュメントを参照してください。
チェックポイント意図したエージェントとアカウントを確認してください。利用できない場合は、より大きなタスクを試す前に互換性を確認してください。 - 3
小さなKiroタスクを1つ実行する
まずコンパクトなブリーフから始め、1 回の修正を含むループ全体を判断できるようにします。
スターターブリーフプロフィールフォームと保存確認を備えた設定画面を構築してください。私のデザインルールを使用してください。デスクトップとモバイルの幅で検証してください。
チェックポイント結果を開き、保存状態をテストし、具体的な変更を 1 つ依頼します。生成されたファイルはレビュー工程を開始するものであり、終わらせるものではありません。
OpenDesign をソースから実行する場合は、代わりに テクニカルクイックスタート を参照してください。
Kiroデザインワークフロー
Kiro の 5 ステップデザインワークフロー
1 つのチェックアウトタスクが、あなたのブリーフから検証済みファイルまでの道筋をたどります。各ステップでは、あなたが提供するもの、Kiro が行うこと、OpenDesign が貢献すること、あなたが確認することを示します。
- 1
デザインブリーフ
シンプルに保ちます：対象ユーザー、画面の役割、プラットフォームを挙げる 3〜6 行。
- あなたあなたがブリーフを書きます。あればリファレンスのスクリーンショットを添付します。
- KiroKiro はブリーフとプロジェクトの指示ファイルを読みます。曖昧な点があれば質問します。
- OpenDesignOpenDesign がプロジェクト、プロンプト入力面、成果物タイプ用のスキルを提供します。
- 確認ブリーフに受け入れ基準が記載されているか確認します。生成後に追加するより、今追加するほうが低コストです。
- 2
デザイン制約
デザインシステムと、いくつかの厳格なルール。その組み合わせが、出力を汎用的ではなくブランドに合ったものに保ちます。
- あなたデザインシステムを選び、ブレークポイントと必ず使用するコンポーネントを明示します。
- Kiroコードを書く前に、Kiro は DESIGN.md のトークンと姿勢ルールをコンテキストに読み込みます。
- OpenDesignOpenDesign はデザインシステムライブラリを提供し、選ばれたものをスキルテンプレートにバインドします。
- 確認トークンがブランドに合っているかを確認します。アクセントカラーは1色、フォントと角丸の値が適切であることを確かめます。
- 3
インターフェースを生成する
Kiro は自己完結型の HTML ファイルを生成します：レイアウト、スタイル、インタラクション、安定したフック。
- あなた待つか、明確化の質問に答えます。設定は不要です。
- KiroKiro はセクションを計画し、HTML、CSS、JavaScript を書き、ファイルを実行して失敗した箇所を修正します。
- OpenDesignOpenDesign は成果物をプロジェクトフォルダーに保存し、プレビュー用にインデックス化します。
- 確認まだ何もありません。ファイルはソースではなく、レンダリング後に判断します。
- 4
プレビュー
ファイルは OpenDesign 内で、指定した幅でレンダリングされます。ここでデザインの判断が行われます。
- あなた幅を切り替え、インタラクションをクリックして確認し、要素にコメントを残します。
- KiroKiro はプレビュー上のコメントを読み取り、次のリビジョンを準備します。
- OpenDesignOpenDesign はプレビューをレンダリングし、コメントと編集のための
data-od-idターゲットを公開します。 - チェック階層構造、コントラスト、390px でのオーバーフロー、フォーカス状態、そしてアクセントカラーが控えめに使われているかを確認します。
- 5
修正と検証
プレビュー内の要素を指し示して変更を依頼します。修正はすべて新しいファイルとして作成され、既存のものが黙って上書きされることはありません。
- あなたコメントを依頼に変換し、タスクが完了したかどうかを判断します。
- KiroKiro は変更をその場で適用し、ファイルを再実行します。
- OpenDesignOpenDesign はバージョンを並べて保持し、完了したら画像または HTML をエクスポートします。
- チェック変更された部分のみを再確認した後、各ブレークポイントでページ全体を一度確認します。
リソース
Kiroデザインリソース
制限事項
Kiro の制限、手動チェック、フォールバック
- 範囲Kiro CLI はエージェントをターミナルに置きます — 対話型チャットセッション、カスタムエージェント、ステアリングファイル、エージェントフック、Model Context Protocol サーバーです。このページでは、OpenDesign に接続されたエージェントとしての Kiro を扱い、Kiro のすべての機能を網羅するものではありません。
- 使用制限使用制限とコストは、使用する認証情報（AWS Builder ID、Google、GitHub、またはAWSアカウントが不要なAWS IAM Identity Center）によって異なります。このページでは、無料利用枠について特に言及していません。
- ネットワークローカルのプロジェクトファイルであっても、推論がオフラインで行われるとは限りません。機密性のある入力を共有する前に、エージェントのプロバイダー設定とデータポリシーを確認してください。
- 出力は HTML です成果物は HTML ファイルであり、ベクター形式のデザインファイルではありません。
- 手動レビューアクセシビリティ、実際のコンテンツ、ブランドとの整合性、インタラクションの正しさは、プレビューであなたが確認します。エージェントによる自己チェックは、あくまで一次チェックとして扱ってください。
- フォールバックエージェントが利用できない場合やタスクが失敗した場合は、インストールされているバージョンの接続手順と認証を確認してください。設定を変更する前に、エラーと最後に成功した成果物を保存しておいてください。
よくある質問
KiroとOpenDesignに関するよくある質問
Kiro CLI は実際にデザイン作業をこなせるのか？
はい — 美的スキル、デザインシステム、そしてコンテキスト内の実際の参考画像があれば、Kiro CLIは本番品質のレスポンシブなUIを生成します。そのスペック駆動のワークフローは、ビルドを明示された意図に対して責任を持たせます。そのコンテキストがなければ、汎用的な見た目に陥りがちで、それがOpenDesignが埋めるギャップです。
Kiro CLIを使うにはAWSアカウントが必要ですか?
いいえ — KiroはAWS Builder ID、Google、GitHub、またはお使いの組織(AWS IAM Identity Center)でのサインインに対応しており、使用にAWSアカウントは必要ありません。Kiroはプレビュー版で、無料で始められます。OpenDesignもいずれの場合も、あなたの認証情報を中継することはありません。
Kiro CLI のデザイン上の強みは何か？
そのスペック駆動のワークフローです。Kiroはコードを書く前に要件、デザインドキュメント、タスクリストを作成するため、ビルドが確定する前にレイアウトとスコープを修正できます。ステアリングファイルがあなたの規約を引き継ぎ、フックでチェックを強制できますが、テイストはあなたが用意するデザインシステム、スキル、参考資料から生まれるものです。
フロントエンドデザイン: Kiro CLI か Claude Code か？
どちらも優れています。Claude Codeはコードベースを踏まえた具体的なデザイン判断で知られており、Kiro CLIの強みはステアリングとフックを備えた、スペック駆動でレビュー可能なワークフローです。多くのチームは両方を使い分けています — OpenDesignなら、デザインワークフローを変えずにエージェントを切り替えられます。
Kiro CLIを外部のデザインツールに接続する方法は?
Kiro CLIはModel Context Protocol (MCP)サーバーを管理します — kiro-cli mcpで追加してください。MCPサーバーは実際のデザインコンテキストとツールをエージェントに取り込み、生成されるコードが近似ではなくソースに一致するようにします。
Kiro CLI とは正確には何か
Kiro は Amazon のエージェント型 AI で、IDE、コマンドラインインターフェース、Web インターフェースとして提供され、スペック駆動開発によってプロトタイプから本番環境まで導くことを目的に作られています。Kiro CLI はそのエージェントをターミナルに持ち込みます。対話型のチャットセッションを開始し、エージェントを作成・管理し、Model Context Protocol サーバーを実行できます — すべてコマンドラインから。Kiro はプレビュー版です。
デザイン作業において決定的な特性はワークフローです。プロンプトを直接コードに変えるのではなく、Kiro はまずスペック — 要件、設計ドキュメント、順序付けられたタスクリスト — を書き、それに沿って実装します。これにより、UI が作られる前にエージェントの計画が可視化されレビュー可能になり、デザイン上の意思決定がなされるべき方法 — まず意図、次に実行 — にきれいに対応します。
スペック: Kiro はコードを書く前にプロンプトを構造化されたスペック — 要件、設計ドキュメント、個別のタスク — に変換するため、計画を最初からレビューできます。
ステアリング + フック: ステアリングファイルはあなたの標準、規約、好みのツールを毎回の実行に持ち込み、エージェントフックはファイル保存のようなイベントで発火してバックグラウンドタスクを自動実行します。
無料で開始、MCP 対応: Builder ID、Google、GitHub、または所属組織でサインインすれば無料で始められます。Kiro CLI は外部コンテキストを取り込むための MCP サーバーも管理します。
認証情報: AWS Builder ID、Google、GitHub、または AWS IAM Identity Center を kiro-cli login 経由で利用（AWS アカウントは不要）
ステータス: プレビュー版。IDE、CLI、Web インターフェースとして利用可能
ベンダー: Amazon (AWS)
デザイン作業において決定的な特性はワークフローです。プロンプトを直接コードに変えるのではなく、Kiro はまずスペック — 要件、設計ドキュメント、順序付けられたタスクリスト — を書き、それに沿って実装します。これにより、UI が作られる前にエージェントの計画が可視化されレビュー可能になり、デザイン上の意思決定がなされるべき方法 — まず意図、次に実行 — にきれいに対応します。
スペック: Kiro はコードを書く前にプロンプトを構造化されたスペック — 要件、設計ドキュメント、個別のタスク — に変換するため、計画を最初からレビューできます。
ステアリング + フック: ステアリングファイルはあなたの標準、規約、好みのツールを毎回の実行に持ち込み、エージェントフックはファイル保存のようなイベントで発火してバックグラウンドタスクを自動実行します。
無料で開始、MCP 対応: Builder ID、Google、GitHub、または所属組織でサインインすれば無料で始められます。Kiro CLI は外部コンテキストを取り込むための MCP サーバーも管理します。
認証情報: AWS Builder ID、Google、GitHub、または AWS IAM Identity Center を kiro-cli login 経由で利用（AWS アカウントは不要）
ステータス: プレビュー版。IDE、CLI、Web インターフェースとして利用可能
ベンダー: Amazon (AWS)
なぜスペック駆動開発がデザインに適しているのか
Kiro CLI のデザイン上の強みはそのワークフローから来ています — ただし、どのエージェントも同じですが、センスは依然として与えられなければなりません。
ピクセルの前に意図: Kiro はスペックと設計ドキュメントを先に書くため、エージェントが凡庸な実装に固まってしまう前に、計画段階でレイアウト、階層、スコープを修正できます。
ステアリングがブランドを運ぶ: ステアリングファイルはトークン、コンポーネント、規約を毎回の実行でエージェントの目の前に保つので、出力はデフォルトの見た目ではなくブランドに沿って機能します。
フックがループを強制する: エージェントフックは保存時に自動でチェックを実行できます — エージェントが覚えていることに頼るのではなく、検証やレビューのステップを組み込む場所です。
センスはあなたが提供する3つの入力から生まれます。デザインシステム、スキル、そして実際の参照画像です。
教訓はどのエージェントも同じことを教えてくれます。Kiro CLI はデフォルトではセンスを持ちません。スペックはビルドを誠実に保ちますが、優れたデザインを生み出すのは、デザインシステム、美的スキル、具体的な参照といった制約を与えたときだけです。OpenDesign はまさにそうした入力をパッケージ化しており、だからこそ両者は組み合わせが良いのです（詳細は後述）。
ピクセルの前に意図: Kiro はスペックと設計ドキュメントを先に書くため、エージェントが凡庸な実装に固まってしまう前に、計画段階でレイアウト、階層、スコープを修正できます。
ステアリングがブランドを運ぶ: ステアリングファイルはトークン、コンポーネント、規約を毎回の実行でエージェントの目の前に保つので、出力はデフォルトの見た目ではなくブランドに沿って機能します。
フックがループを強制する: エージェントフックは保存時に自動でチェックを実行できます — エージェントが覚えていることに頼るのではなく、検証やレビューのステップを組み込む場所です。
センスはあなたが提供する3つの入力から生まれます。デザインシステム、スキル、そして実際の参照画像です。
教訓はどのエージェントも同じことを教えてくれます。Kiro CLI はデフォルトではセンスを持ちません。スペックはビルドを誠実に保ちますが、優れたデザインを生み出すのは、デザインシステム、美的スキル、具体的な参照といった制約を与えたときだけです。OpenDesign はまさにそうした入力をパッケージ化しており、だからこそ両者は組み合わせが良いのです（詳細は後述）。
ゼロから始める、デザイン向け Kiro CLI のセットアップ
セットアップの順序: インストール → 認証 → ステアリングとデザインスペックの追加 → スキルの追加 → ブラウザ検証の有効化。
デザインルールをエンコードする: トークン、プリミティブ、規約をステアリングファイルに入れて、エージェントが毎回の実行で読むようにすれば、出力はデフォルトの凡庸な見た目ではなくブランドに一致します。
ブラウザ検証を追加する: Playwright またはブラウザ MCP サーバーを組み込み、Kiro が実際のブラウザでレンダリングし、ビルドが通ったことを確認するだけでなく、ブレークポイントをまたいで出力をチェックできるようにします。
コマンドとバージョン固有の詳細については、変更される可能性があるため、最新のセットアップセクションを使用してください。
以前のガイドに掲載された履歴的なコマンド例です。現在の構文はリンク先のベンダードキュメントで確認してください。
デザインルールをエンコードする: トークン、プリミティブ、規約をステアリングファイルに入れて、エージェントが毎回の実行で読むようにすれば、出力はデフォルトの凡庸な見た目ではなくブランドに一致します。
ブラウザ検証を追加する: Playwright またはブラウザ MCP サーバーを組み込み、Kiro が実際のブラウザでレンダリングし、ビルドが通ったことを確認するだけでなく、ブレークポイントをまたいで出力をチェックできるようにします。
コマンドとバージョン固有の詳細については、変更される可能性があるため、最新のセットアップセクションを使用してください。
# 1. Install Kiro CLI (see kiro.dev/docs/cli for the macOS/Linux/Windows command)
# 2. Authenticate — opens your browser to complete sign-in
kiro-cli login # choose Builder ID, Google, GitHub, or your organization
# 3. Confirm you are signed in
kiro-cli whoami
# 4. Start an interactive session in your project
cd your-project
kiro-cli chat
# 5. Wire MCP servers (optional, e.g. for design handoff)
kiro-cli mcp add ...以前のガイドに掲載された履歴的なコマンド例です。現在の構文はリンク先のベンダードキュメントで確認してください。
Kiro を使ったスクリーンショットから UI へのワークフロー
Kiro CLI で最も効果の高いデザインループは、参照画像を動作するレスポンシブ UI に変え、一致するまで反復することです — まずスペックに意図を捉えさせ、それに沿って構築します。
手持ちで最も明確なビジュアル参照から始め、ヒーローショット1枚だけでなく複数の状態（デスクトップとモバイル、ホバー、空、ローディング）を含めます。
Kiro にプロンプトからスペックと設計ドキュメントを書かせ、構築前に計画をレビューします — ここでレイアウトとスコープの問題を早い段階で捉えられます。
デザインシステムと規約はステアリングファイルに置き、トークンと正規のプリミティブがどこにあるかを Kiro に伝えます。
開発サーバーを実行し、Kiro に実際のブラウザでレンダリングさせ、ブレークポイントにリサイズして結果を確認します。
Kiro に自身の実装を参照と比較させて反復します — ビルドが通ることだけを確認するのではありません。
対話型セッションを開き、最初に具体的な制約を与えて、書かれるスペックがあなたの本当の意図を反映するようにします:
タスクは小さく焦点を絞り、良い反復はコミットし悪いものは元に戻し（戻したときは Kiro に伝える）、各パスがクリーンな基盤の上に積み上がるようにします。
以前のガイドに掲載された履歴的なコマンド例です。現在の構文はリンク先のベンダードキュメントで確認してください。
手持ちで最も明確なビジュアル参照から始め、ヒーローショット1枚だけでなく複数の状態（デスクトップとモバイル、ホバー、空、ローディング）を含めます。
Kiro にプロンプトからスペックと設計ドキュメントを書かせ、構築前に計画をレビューします — ここでレイアウトとスコープの問題を早い段階で捉えられます。
デザインシステムと規約はステアリングファイルに置き、トークンと正規のプリミティブがどこにあるかを Kiro に伝えます。
開発サーバーを実行し、Kiro に実際のブラウザでレンダリングさせ、ブレークポイントにリサイズして結果を確認します。
Kiro に自身の実装を参照と比較させて反復します — ビルドが通ることだけを確認するのではありません。
対話型セッションを開き、最初に具体的な制約を与えて、書かれるスペックがあなたの本当の意図を反映するようにします:
タスクは小さく焦点を絞り、良い反復はコミットし悪いものは元に戻し（戻したときは Kiro に伝える）、各パスがクリーンな基盤の上に積み上がるようにします。
kiro-cli chat
# in the prompt:
> Here are my references: reference-desktop.png and reference-mobile.png.
Write a spec, then implement this design in React + Vite + Tailwind + TypeScript.
Reuse my existing design-system components and tokens (see my steering files).
Match spacing, layout, and hierarchy; make it responsive.
Render it in the browser and iterate until it matches the references
across breakpoints.以前のガイドに掲載された履歴的なコマンド例です。現在の構文はリンク先のベンダードキュメントで確認してください。
スペック、ステアリング、フック、MCP
4つの拡張ポイントが Kiro CLI を継続的なデザイン作業に実用的にし、そのすべてがオープンなデザインワークフローにきれいに対応します。
スペック: 要件、設計ドキュメント、順序付けられたタスクリスト — 機能がどうあるべきかの永続的な記録であり、構築の前と最中にレビューできます。
ステアリングファイル: エージェントが毎回の実行で読むコンテキスト、コーディング標準、好みのワークフローやツールを追加します — デザイン規約とトークンの自然な置き場所です。
エージェントフック: ファイル保存のようなイベントでトリガーされ、チェックやドキュメントといったバックグラウンドタスクを実行する自動化 — 検証ステップを自動的に強制する場所です。
MCP サーバー: Kiro CLI は Model Context Protocol サーバーを管理します。これは外部のデザインコンテキストや、Kiro だけでなく複数のエージェントで機能するツールを持ち込むためのポータブルな方法です。
これらはポータブルでマルチエージェントな機能です — まさに OpenDesign が、プロジェクトごとに作り直すのではなくオーケストレートするために作られているものです。
スペック: 要件、設計ドキュメント、順序付けられたタスクリスト — 機能がどうあるべきかの永続的な記録であり、構築の前と最中にレビューできます。
ステアリングファイル: エージェントが毎回の実行で読むコンテキスト、コーディング標準、好みのワークフローやツールを追加します — デザイン規約とトークンの自然な置き場所です。
エージェントフック: ファイル保存のようなイベントでトリガーされ、チェックやドキュメントといったバックグラウンドタスクを実行する自動化 — 検証ステップを自動的に強制する場所です。
MCP サーバー: Kiro CLI は Model Context Protocol サーバーを管理します。これは外部のデザインコンテキストや、Kiro だけでなく複数のエージェントで機能するツールを持ち込むためのポータブルな方法です。
これらはポータブルでマルチエージェントな機能です — まさに OpenDesign が、プロジェクトごとに作り直すのではなくオーケストレートするために作られているものです。
デザイン比較: Kiro vs Codex vs Claude Code vs Cursor vs Gemini CLI
デザイン作業に唯一の勝者はいません — 各エージェントは異なる強みを持ち、経験豊富なチームはそれらを重ねて使います。公平な要約:
Kiro CLI — スペック駆動ワークフロー — コードの前に要件、設計ドキュメント、タスクリスト。ステアリングファイルとフックがビルドをブランドに沿わせる — 実装前に意図とスコープが固まる、構造化されたレビュー可能なビルド
Codex — フロントエンドスキルによる強力なビジュアルの磨き込み。サンドボックス化された非同期ビルド — 委任された非同期ビルドとポータブルな AGENTS.md ルール
Claude Code — 具体的なデザイン判断（hex、スペーシング、タイポグラフィ）とコードベースを意識した UX — フロントエンドの推論と大規模コンテキストのリファクタリング
Cursor — ライブプレビューとインライン編集による視覚的なビルド&確認ループ — IDE 内での密な反復と観察を伴う UI 作業
Gemini CLI — 強力なマルチモーダル画像理解と非常に大きなコンテキスト。無料枠のあるオープンソース — スクリーンショットの多い作業と、デザインシステム全体をコンテキストに保持すること
コミュニティで繰り返し出る結論は、センスは人間から来るということです。スキル、参照、制約がなければ、どれも凡庸な美学にデフォルトします。それが解決すべき本当の問題であり、それはモデルの形ではなくデザインツールの形をしています。
エージェント — デザインの強み — 最適な用途
Kiro CLI — スペック駆動ワークフロー — コードの前に要件、設計ドキュメント、タスクリスト。ステアリングファイルとフックがビルドをブランドに沿わせる — 実装前に意図とスコープが固まる、構造化されたレビュー可能なビルド
Codex — フロントエンドスキルによる強力なビジュアルの磨き込み。サンドボックス化された非同期ビルド — 委任された非同期ビルドとポータブルな AGENTS.md ルール
Claude Code — 具体的なデザイン判断（hex、スペーシング、タイポグラフィ）とコードベースを意識した UX — フロントエンドの推論と大規模コンテキストのリファクタリング
Cursor — ライブプレビューとインライン編集による視覚的なビルド&確認ループ — IDE 内での密な反復と観察を伴う UI 作業
Gemini CLI — 強力なマルチモーダル画像理解と非常に大きなコンテキスト。無料枠のあるオープンソース — スクリーンショットの多い作業と、デザインシステム全体をコンテキストに保持すること
コミュニティで繰り返し出る結論は、センスは人間から来るということです。スキル、参照、制約がなければ、どれも凡庸な美学にデフォルトします。それが解決すべき本当の問題であり、それはモデルの形ではなくデザインツールの形をしています。
エージェント — デザインの強み — 最適な用途
よくある落とし穴と「AI slop」風の見た目を避ける方法
AI 生成デザインについて最もよく聞かれる不満は、見た目が凡庸だというものです — 柔らかなグラデーション、浮いたパネル、大きすぎる角丸、劇的な影、「これ AI が作った」と叫んでいるような Inter と紫の雰囲気。他に報告されている問題には、モバイルレイアウトの崩れや、指示が UI のコピーに漏れ出すことなどがあります。これらは Kiro CLI に固有のものではありません。キュレーションされたデザインコンテキストなしでどんなエージェントを走らせても起こることです — スペックはビルドをタスクに沿わせますが、センスは与えません。
美的スキルを追加する: キュレーションされたデザインスキルは、エージェントにデフォルトの見た目ではなく本物の方向性にコミットさせます。
実際のブラウザで検証する: ブレークポイントをまたいでレンダリングと自己チェックを行います — 可能ならフックとして組み込みます — モバイルでレイアウトが黙って崩れないようにするためです。
トークンと参照を提供する: 実際のデザイントークンと参照スクリーンショットは、出力品質に対する単一最大のレバーです。
ルールをステアリングファイルにエンコードする: 「ヒーローカード禁止、書体は最大2つ、ブランド優先の階層」といったスタイルルールを、エージェントが毎回読む場所に置きます。
すべての緩和策はエージェントにキュレーションされたデザインコンテキストを与えることに関するものだと気づいてください。そのコンテキストをプロジェクトごとに手作業で維持することが、OpenDesign が取り除く苦労です。
美的スキルを追加する: キュレーションされたデザインスキルは、エージェントにデフォルトの見た目ではなく本物の方向性にコミットさせます。
実際のブラウザで検証する: ブレークポイントをまたいでレンダリングと自己チェックを行います — 可能ならフックとして組み込みます — モバイルでレイアウトが黙って崩れないようにするためです。
トークンと参照を提供する: 実際のデザイントークンと参照スクリーンショットは、出力品質に対する単一最大のレバーです。
ルールをステアリングファイルにエンコードする: 「ヒーローカード禁止、書体は最大2つ、ブランド優先の階層」といったスタイルルールを、エージェントが毎回読む場所に置きます。
すべての緩和策はエージェントにキュレーションされたデザインコンテキストを与えることに関するものだと気づいてください。そのコンテキストをプロジェクトごとに手作業で維持することが、OpenDesign が取り除く苦労です。
デザインのために OpenDesign 内で Kiro CLI を使う
OpenDesign は、上記のワークフローが繰り返し求めているオープンソースのデザインレイヤーです。Kiro CLI をファーストパーティのアダプターとして扱い、キュレーションされたスキルとデザインシステムのライブラリ、構造化されたレンダリングパイプライン、ローカルのデスクトップ UI で包みます — だから Kiro を良くするデザインコンテキストが最初の実行からそこにあり、毎回手作業で組み立てる必要がありません。OpenDesign はローカルファーストで、その組み合わせをシンプルに保ちます。ファイルとサインインはあなたのマシン上に留まります。
AWS Builder ID またはその他のサインインで認証します — 認証情報はあなたのマシン上に留まり、私たちを通じてプロキシされることはありません。
デザインシステムとスキルを選び、一貫したセンスでデッキ、プロトタイプ、ランディングページを生成します。
すべての成果物と DESIGN.md ファイルは、ホストされたクラウドではなく、あなた自身のリポジトリに存在します。
同じ Kiro CLI エージェント、同じサインイン — それに加えて、その周りに本物の、ポータブルな、オープンソースのデザインワークフローがあります。OpenDesign はローカルファーストかつ Apache-2.0 なので、あなたの作業や認証情報に関する何もマシンの外に出ません。
OpenDesign をインストールし、エージェントとして Kiro CLI を選択します。
AWS Builder ID またはその他のサインインで認証します — 認証情報はあなたのマシン上に留まり、私たちを通じてプロキシされることはありません。
デザインシステムとスキルを選び、一貫したセンスでデッキ、プロトタイプ、ランディングページを生成します。
すべての成果物と DESIGN.md ファイルは、ホストされたクラウドではなく、あなた自身のリポジトリに存在します。
同じ Kiro CLI エージェント、同じサインイン — それに加えて、その周りに本物の、ポータブルな、オープンソースのデザインワークフローがあります。OpenDesign はローカルファーストかつ Apache-2.0 なので、あなたの作業や認証情報に関する何もマシンの外に出ません。
OpenDesign をインストールし、エージェントとして Kiro CLI を選択します。
OpenDesign は Amazon や AWS と提携していますか？
いいえ。OpenDesign は独立しています。Kiro は Amazon の商標です。