KiroとFigmaで進めるAI仕様駆動開発について - エンジニア x デザインの境界線 -

2025年12/17 (水) にAWS Startup Loft Tokyoで行われたさようなら2025 〜AI・エンジニアリング・デザインの忘年会〜のスポンサーセッションの資料です。
https://cross-rel.connpass.com/event/377013/

Transcript

1. © 2025, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amazon Confidential and Trademark. © 2025, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amazon Confidential and Trademark. AWS Startup Solutions Architect Yuta Sato KiroとFigmaで進めるAI仕様駆動開発について - エンジニア x デザインの境界線 -
2. © 2025, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amazon Confidential and Trademark. © 2025, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amazon Confidential and Trademark. 2 Self Introduction Yuta Sato NTT DATA R&D Software Engineer è AWS Support Engineer + 東京デザインプレックス研究所に通学 è AWS Startup Solutions Architect 普段はスタートアップのお客様の⽀援 趣味でデザインを勉強しています この資料の内容は All opinion is my ownです
3. © 2025, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amazon Confidential and Trademark. はじめに AIが発展した世界では⼈間は、 機械のように働くことはなくなり クリエイティビティとアイデアがより⼤事になる https://www.amazon.co.jp/TIME-OFF-働き方に“生産性”と“創造性”を取り戻す戦略的休息術 -ジョン・フィッチ/dp/4295408115
4. © 2025, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amazon Confidential and Trademark. 4 • Figma からUI コンポーネント をインポート • Amplify UIを使った Reactコードに変換 • エンジニアが理解して、 アプリケーションに取り込む Design to Codeの歴史 - Amplify Studioの場合 -
5. © 2025, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amazon Confidential and Trademark. 5 Design to Codeの今 - Agentic IDE (Kiro等) x Figma MCP Server - Agentic IDE (AI Agent搭載IDE) + MCP Serverの利⽤で AI agentがデザインからコードに変換、アプリに組み込んで開発まで可能 -> Design to Codeの距離がこの1,2年で急速に縮まっている
6. © 2025, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amazon Confidential and Trademark. AI IDE Kiro のご紹介
7. © 2025, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amazon Confidential and Trademark. 7 Coding by AI • 従来︓⼈間がコードを記述 • 現在︓AIエージェントが⾃律的に開発 • ⼈間の役割︓プロンプト作成のみ • これが所謂「バイブコーディング」
8. © 2025, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amazon Confidential and Trademark. 8 AIが⾃律的にソフトウェアを 構築、保守し、 ⼈間の関与をほとんど、 もしくは全く必要としない AI-Managed (Vibe Coding) ソフトウェア/システム ビジネスの意図 Vibe Coding の課題
9. © 2025, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amazon Confidential and Trademark. 9 単純なシナリオ以外では ほとんど機能しない 信頼性に⽋ける 説明できない “開発者がコード、プロダクトと 『つながっていない』感” ソフトウェア/システム ビジネスの意図 Vibe Coding の課題
10. © 2025, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amazon Confidential and Trademark. 10 そこで仕様駆動開発というコンセプト 10
11. © 2025, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amazon Confidential and Trademark. 11 11 KiroのSpecモードによる仕様駆動開発 スペックモードでは、Kiroが対話を通じて以下のmdファイルを⽣成し、 AI開発において⼈間主導のレビューを⾏って開発を進める Human Review Human Review requirement.md 要件定義 design.md 図などの設計書 task.md ステップごとの タスク
12. © 2025, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amazon Confidential and Trademark. 12 12 ツール MCP MCP サーバー ツール ツール MCP (Model Context Protocol)によって、 AI Agentは様々なツールが使えるようになる
13. © 2025, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amazon Confidential and Trademark. 13 https://developers.figma.com/docs/figma-mcp-server/tools-and-prompts/
14. © 2025, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amazon Confidential and Trademark. 14
15. © 2025, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amazon Confidential and Trademark. 15 15 ツール MCP MCP サーバーA ツール ツール MCP (Model Context Protocol)によって、 AI Agentは様々なツールが使えるようになる…が 重くて 動きにくい ツール MCP サーバーB ツール ツール ツール MCP サーバーC ツール ツール
16. © 2025, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amazon Confidential and Trademark. 16 そこでできたのが、Kiro powers 💪 !! https://kiro.dev/powers/
17. © 2025, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amazon Confidential and Trademark. 17 • Figma、Stripe、 Supabaseなど公式パー トナーがPowerを提供 • POWER.mdによる オンボーディングを通 してSteering(ルール) やHookを設定してくれ る パートナーによる エコシステム ワンクリック インストール 必要に応じた動的MCP ツールの読み込み • 作業内容に応じて、関 連するMCPツールと知 識のみを動的に読み込 み • ツールを事前に読み込 まないため、コンテキ ストの汚染を防⽌ • IDEからワンクリック でPowerをインストー ル可能 • MCP設定や 知識ドキュメントをま とめて⾃動登録 Kiro powersのパワー！ powers
18. © 2025, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amazon Confidential and Trademark. 18 https://www.hashicorp.com/en/blog/hashicorp-is-a-kiro- powers-launch-partner なるほど、 デザインのレイアウトの情報が 今必要なのか get_metadataツールを ⼊れて、使おう Figmaにあるデザインの レイアウトを参考にしたい
19. © 2025, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amazon Confidential and Trademark. 19 Kiro Powers 1 Click Install https://aws.amazon.com/jp/blogs/news/introducing-powers/
20. © 2025, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amazon Confidential and Trademark. 20 https://kiro.dev/downloads/ How to download Kiro
21. © 2025, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amazon Confidential and Trademark. 21 最後に … どんどんAIが進化していく中でのエンジニアと デザイナーの境界線について (100% 個⼈の⾒解です) • どこかのラジオで⼈⽣、数字とアート 両⽅⼤事と⾔ってました • AIがこれからも何かを学ぶ際の 敷居を跨ぐことに関してサポートしてく れる存在になってほしいと思います • エンジニアがデザインを、 デザイナーがエンジニアリングを、 学ぶことができるチャンスが もっと増えると良いな︕ https://builder.aws.com/content/2ztdpp3SCPOgbX8F51PSSb6kTeq/ aws-kiro-ide-not-just-another-ai-toy-for-developers
22. © 2025, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amazon Confidential and Trademark. 22 終わりに これからも引き続き、 技術 x デザインを学んでいくので、 ⼀緒に学んでいくお仲間募集中です︕︕ X: @yuupher linkedin: www.linkedin.com/in/yuta- sato-4b7337189