Figma Make風デザインアプリケーションをBedrock AgentCore × Strands Agents SDKで実装してみた

Transcript

1. Figma Make風デザインアプリケーションを Bedrock AgentCore × Strands Agents SDKで実装してみた I tried implementing a design application like Figma Make using Bedrock AgentCore × Strands Agents SDK JAWS-UG東京 ランチタイムLT会 #38 池田 夕太郎 (Yutaro Ikeda)
2. Introduction 池田 夕太郎 (Yutaro Ikeda) メーカー系SIer勤務 新卒2年目 アプリケーションエンジニア JAWS-UGでのLTは初登壇です！ JAWS FESTA 2026 in AKITAで落選したCfPを供養しにきました！ 主な業務: フロントエンド技術支援 好きなAWSサービス: Amazon Bedrock AgentCore 受賞歴: 2026 Japan All AWS Certifications Engineers @yucn_qiita 2
3. Bedrock AgentCore × Strands Agents SDK Bedrock AgentCore Strands Agents SDK AIエージェントを「動かす」基盤 • • AIエージェントを「作る」キット エージェントに必要な機能を提供するサービス群 マネージドかつサーバレスでエージェントを運用可能 Runtime Gateway AWSがOSSとして公開しているフレームワーク Python, TypeScriptでエージェントを構築・実行 • • Memory ~ $ pip install strands-agents █ インストール後、わずか3行でAIエージェントを実行可能 Identity Browser Observability Evaluations Code Interpreter Policy agent.py 1 2 3 4 from strands import Agent agent = Agent() agent(“What is the Strands Agents SDK?”) 3
4. Figma Make Figma 共同でデザイン可能なプラットフォーム • • 誰もがデザインできるようにするためのサービス群 デザイン、コード、AIがひとつにつながるキャンバス Figma Make AIとの会話を通じてUIを具現化するツール • • プロンプトからデザインとコードを生成するツール アイデアをインタラクティブなUIとして具現化できる Figma Design デザインを作成、共有、テストするためのツール Figma Motion Figma上でアニメーションを直接作成するツール Dev Mode デザインをコードへとスムーズに変換する 既存のデザインを使用して生成 コンポーネントをチャットに添付 4
5. Background 課題 国内データレジデンシーに未対応 現在、FigmaはFigma Makeを含め、日本国内に限定したデータレジデンシーを提供していない 厳格な要件の案件では利用できない データを国外に送信できないような厳格なデータレジデンシーが求められる案件では、Figma Makeを利用することができない ※ エンタープライズプラン向けのオプションサービスとして日本市場向けにデータレジデンシーの提供を開始 (2026/9/9) Figma Design / FigJam / Figma Slides / Figma Makeのファイルデータを日本国内で保存可能に 解決アプローチ Amazon Bedrockなら日本国内に閉じた推論が可能 Amazon Bedrock上のClaudeは、日本国内クロスリージョン推論が利用できる Bedrock AgentCore × Strands Agents SDKで自作してみた Bedrock AgentCoreとStrands Agents SDKで、国内に閉じた推論が可能なFigma Make風デザインアプリケーションを実装 5
6. Architecture design AWS Cloud Tokyo (ap-northeast-1) Cognito Users CloudFront S3 API Gateway Lambda Systems Manager Parameter Store Bedrock S3 AgentCore Runtime AgentCore Memory AgentCore Browser DynamoDB S3 Vectors Bedrock Knowledge Bases AgentCore Observability CloudWatch Logs 6
7. UI generation workflow (1/2) AgentCore Runtime • Strandsで構築したマルチエージェントのワークフローを実行 Knowledge Bases (S3 Vectors) • • デザインのプリセットを管理 デザインシステムのRAG検索に使用 Strands Agents SDK (TypeScript) 1. GraphとAgents as ToolsでUIのデザインを設計 2. 設計した仕様をもとに、React / Vueのプロジェクトを生成 AgentCore Memory ユーザーのデザイン嗜好を記憶 パーソナライズされたUIの生成に寄与 3. Browserでの動作検証で指摘された箇所を修正 • • Bedrock (Claude Haiku 4.5 / Sonnet 4.6) AgentCore Browser • • 国内推論が可能なモデルIDをSSM Parameter Storeで管理 SSM Parameter StoreからモデルIDを取得し、推論を実行 • • 生成されたUIをレンダリング レンダリングによるUIの動作検証 7
8. UI generation workflow (2/2) AgentCore Runtime • Strandsで構築したマルチエージェントのワークフローを実行 Knowledge Bases (S3 Vectors) • • デザインのプリセットを管理 デザインシステムのRAG検索に使用 Strands Agents SDK (TypeScript) 1. GraphとAgents as ToolsでUIのデザインを設計 2. 設計した仕様をもとに、React / Vueのプロジェクトを生成 AgentCore Memory ユーザーのデザイン嗜好を記憶 パーソナライズされたUIの生成に寄与 3. Browserでの動作検証で指摘された箇所を修正 • • Bedrock (Claude Haiku 4.5 / Sonnet 4.6) AgentCore Browser • • 国内推論が可能なモデルIDをSSM Parameter Storeで管理 SSM Parameter StoreからモデルIDを取得し、推論を実行 • • 生成されたUIをレンダリング レンダリングによるUIの動作検証 8
9. Demonstration GitHub yucn6201g/makeui 9
10. Multi-agent design (first generation) Strands Graph : 4体を1つのグラフで実行 layout-architect まず全体のレイアウトと構造を決める interaction-designer workflow-router 初回は4体すべてを担当に選定 操作と状態遷移 style-expert SPECIFICATION.md design-critic 各セクションを機械的に連結 FIX: / ADD: で直接編集 配色・タイポ・密度 content-strategist 文言とデータ設計 Knowledge Bases AgentCore Memory AgentCore Browser デザインプリセットを検索 過去の似た依頼の設計を再利用 生成したUIを実描画して確認 10
11. Multi-agent design (add / modify) Strands Graph : 選ばれた専門家のみ実行（例 : 文言修正の指示を受けた場合） layout-architect まず全体のレイアウトと構造を決める interaction-designer workflow-router Haiku 1回で担当を絞り込む 操作と状態遷移 style-expert SPECIFICATION.md design-critic 該当セクションのみ更新 FIX: / ADD: で直接編集 配色・タイポ・密度 content-strategist 文言とデータ設計 Knowledge Bases AgentCore Memory AgentCore Browser デザインプリセットを検索 直前までの設計と履歴を引き継ぐ 生成したUIを実描画して確認 11
12. Thoughts 実装して見えたこと 今後の展望 描画の確認はBrowserが重要 無駄なトークン消費を削減 静的検査で問題がなくても、実描画の確認が必須 それぞれエージェントでの生成内容を無駄なく受け渡したい アプリでの描画エラー 8月の利用料は$533.81 静的検査では検知できず、 アプリ側でレンダリングしてみて 初めて起動エラーが発覚 生成時のトークン消費が激しく、 試行錯誤のたびにトークンが積み上がり、 個人開発では痛い出費に 描画確認を挟むことで、 動かないUIの生成をストップ それぞれのエージェントでの 無駄なトークン消費を削減したい Bedrock AgentCoreとStrands Agents SDKを組み合わせれば、個人開発でもここまで構築できた！ 12