参考リンク
Kiroに関する参考資料
公開されているガイドに記載されている、Kiroでデザインするためのチュートリアル、ドキュメント、解説記事です。
Kiro 
OpenDesign OpenDesign で
Kiro と
デザインする。
Kiroを使ってOpenDesignでインターフェースをデザインする方法：コードを書く前に仕様を作成し、コピーとエラー処理のためのステアリングファイルを用意し、ブリーフからレビュー済みファイルまでの1つのチェックアウトタスクを実施し、開始前に知っておくべき制限事項を確認します。
ブリーフからインターフェースへ01 / Kiro
アイデアを持ち込むのはあなたです↗
“仕様書から作られたチェックアウト、
ムードボードからではない。”
この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グリッド上に配置され、サマリーはデスクトップではスティッキー、スマートフォンでは折りたたみ可能です。
階層
視覚的階層
質問、フィールド、ボタンの順に配置し、アクセントは現在のステップのみを示します。
レスポンシブ
モバイルレイアウト
サマリーはフォームの上部にある折りたたまれた合計行になり、ボタンは幅いっぱいに広がります。
インタラクション
インタラクションの確認
アドレスエラーを発生させ、プロモコードを適用し、カートに戻ります。
適合性
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インターフェースとして提供され、プロトタイプから本番までのspec駆動開発向けに構築されています。現在プレビュー段階です。このページはKiro自体のインターフェースについてではなく、OpenDesignを通じて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回の修正を含む小さなブリーフを使用してください。
スターターブリーフプロフィールフォームと保存確認を備えた設定画面を作成してください。私のデザインルールを使用し、デスクトップとモバイルの幅で確認してください。
チェックポイント結果を開き、保存状態をテストして、具体的な変更を一つ依頼してください。生成されたファイルはレビューの始まりであり、終わりではありません。
ソースから OpenDesign を実行するには、代わりに技術クイックスタートをご覧ください。
Kiroデザインワークフロー
5ステップで見るKiroデザインワークフロー
同じチェックアウトフローの課題を、ブリーフから検証済みファイルまで追跡します。各ステップでは、あなたが提供するもの、Kiroが行うこと、OpenDesignが提供するもの、そしてあなたが確認する内容を示しています。
- 1
デザインブリーフ
平易な言葉で3〜6行。対象ユーザー、画面の役割、対象プラットフォームを明記します。
- あなたブリーフを書きます。参考となるスクリーンショットがあれば添付します。
- Kiroブリーフとプロジェクトの指示ファイルを読み込み、あいまいな点があれば質問します。
- OpenDesignプロジェクト、プロンプトサーフェス、成果物の種類に応じたスキルを提供します。
- 確認ブリーフに受け入れ基準が記載されていることを確認します。生成後よりも今のうちに追加する方がコストを抑えられます。
- 2
デザイン制約
デザインシステムと少数の厳格なルールです。これがブランドに沿った出力と、ありふれた見た目とを分ける要因になります。
- あなたデザインシステムを選び、ブレークポイントと必須のコンポーネントを指定します。
- Kiro1行書き始める前に、DESIGN.mdのトークンとポスチャールールをコンテキストに読み込みます。
- OpenDesignデザインシステムライブラリを提供し、選択したものをスキルテンプレートに紐付けます。
- 確認トークンがブランドに合っているかを確認します。アクセントカラーは1色、フォントと角丸の値が適切であることを確かめます。
- 3
インターフェースを生成する
Kiroは、レイアウト・スタイル・インタラクション・安定したフックを含む自己完結型のHTMLファイルを作成します。
- あなた待つか、確認の質問に答えます。設定することは何もありません。
- Kiroセクションを計画し、HTML、CSS、JavaScriptを書き、ファイルを実行して不具合を修正します。
- OpenDesign成果物をプロジェクトフォルダに保存し、プレビュー用にインデックスを作成します。
- 確認ここではまだ何もありません。ファイルはソースではなく、レンダリングされた状態で評価します。
- 4
プレビュー
ファイルは、指定した幅で OpenDesign 内にレンダリングされます。ここでデザインが判断されます。
- あなた幅を切り替え、インタラクションをクリックして試し、要素にコメントを残します。
- Kiroプレビューへのコメントを読み取り、次の改訂版を用意します。
- OpenDesignプレビューをレンダリングし、コメントや編集用に
data-od-idターゲットを公開します。 - チェック階層構造、コントラスト、390px でのオーバーフロー、フォーカス状態、そしてアクセントカラーが控えめに使われているかを確認します。
- 5
修正と検証
プレビュー内の要素を指し示して変更を依頼します。修正はすべて新しいファイルとして作成され、既存のものが黙って上書きされることはありません。
- あなたコメントを依頼に変換し、タスクが完了したかどうかを判断します。
- Kiroその場で変更を適用し、ファイルを再実行します。
- OpenDesignバージョンを並べて保持し、完了時に画像または 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で最初のデザインタスクを始める
まずは小さなタスクから始めて往復のやり取りを確認し、その後に本番のブリーフを持ち込んでください。ご自身の環境に合ったオプションを選択してください。このページは環境を自動検出しません。