3 分でブログをスライドにする——Kiro で

AWS Hong Kong Summit 2026 · Developer Lounge 振り返り · 全 6 本中 第 6 本

AWS Magazine · ビクトリア・ハーバーからの現地レポート

開幕：ハイテク・ラグジュアリーがウォーターフロントの空気と出会う

AWS Hong Kong Summit 2026 の期間中、香港会議展覧中心（HKCEC）の床から天井までのガラスコンコースに立ったことがあるなら、あの感覚を知っている：ビクトリア・ハーバーのパノラマ、暗い水面を踊るネオンの反射、高リスク技術がグローバル金融と出会う独特のうなり。

湾仔の中心で、数百万ドル規模のベンチャーキャピタルとスタートアップディールが、手注ぎの職人茶とエスプレッソ越しに交渉されていた。国際スピーカーとクラウドアーキテクトが東京、ロンドン、シリコンバレーから飛来し、AWS Developer Lounge に集った。環境は電撃的だった——香港らしいラグジュアリーと AWS の最先端クラウド美学の並置。

プライベート投資家ミートアップ、スタートアップピッチデック、技術深掘りの合間に、Developer Lounge は最終セッションを迎えた。ベテラン技術ライターなら誰でも言う：象徴的なサミットはいつも、飛行機の中で実際に持ち帰って使えるギフトバッグのようなトークで終わる。

Developer Lounge 弧の締めくくりとして、Haowen Huang は長文技術コンテンツを 3 分フラットで磨き上げた経営層向けプレゼンへ変えるマスタークラスを届けた。

エレベーターピッチ： Amazon Web Services ブログの URL を Kiro に渡すと、およそ 3 分でカスタムテーマの本番級スライドデックが届く——Vue コンポーネント、応答性のあるアーキテクチャ図、ゼロ手動レイアウト——PowerPoint（PPTX）、PDF、PNG へそのままエクスポート可能。

+-----------------------------------------------------------------------------------+
3 分 AGENT LOOP

1. [ 技術ブログ / URL ]
2. [ Kiro AI Agent Engine ]  -->  .kiro/steering/skill.md を再読
3. [ Slidev Engine + theme-aws-dark ]  -->  Vue コンポーネントをレンダリング
4. [ ローカルプレビュー :3030 ]  -->  PPTX / PDF / PNG をエクスポート
+-----------------------------------------------------------------------------------+

AWS Hong Kong Summit 2026 で、Haowen Huang は Developer Lounge を Kiro と Slidev のワークフローで締めくくった——AWS ブログ URL を約 3 分で磨き上げたデックへ変える。.kiro/steering/skill.md に導かれ、agent はコンテンツを取得し、言語を検出し、theme-aws-dark Vue コンポーネントを適用し、PPTX、PDF、PNG をエクスポートする——無給の meetup デザイン作業を、決定的でバージョン管理可能な Markdown パイプラインへ置き換え、ビルダーは clone、反復し、帰りのフライトで実行できる。

技術リソースとリポジトリ

ハンズオン分解に入る前に、これらの必須リポジトリとツールをブックマークせよ：

• プロジェクト GitHub リポジトリ： github.com/hanyun2019/kiro-slidev-ppt-maker

• Slidev フレームワーク： sli.dev

• Kiro Agentic IDE： kiro.dev

誰も予算に入れない高額な 1 時間（香港 Meetup の解き方）

誰もが経験がある。Amazon EC2、Amazon Bedrock、Serverless パイプラインの見事なアーキテクチャ分解を読み、エンジニアリングチーム、ローカル AWS User Group、または潜在シード投資家にプレゼンしたくなる。

伝統的なスライド作成フローは悪名高いほど退屈だ：

1. PowerPoint、Keynote、または Google Slides を開く。

2. 段落をコピー＆ペーストし、骨を折って箇条書きへ圧縮する。

3. 1 時間アライメント狩り、フォントサイズ調整、ボックス寸法いじりに費やす。

4. 純粋なデザインオーバーヘッドに 1〜2 時間を浪費する——コア技術コンテンツはすでに書かれていたのに！

香港の高速スタートアップ生態系では、コミュニティ主催者が毎回ローカル meetup 前に深夜までスライド整形に燃やす。Haowen のプロジェクトは、その無給デザイン労働を決定的な 3 分 AI agent ループ へ変換する。節約された時間と資源は、エンジニア採用、スポンサー確保、プライベート創業者ミートアップ資金へ即座に戻せる。

スタック：プロジェクトアーキテクチャの中身は？

このワークフローは Slidev（Vue 3 と Vite 上に構築された、開発者第一・Markdown 駆動のスライドプレゼンツール）と Kiro（spec と steering ファイルに導かれる AI agentic 開発環境）を組み合わせる。

プロジェクトコンポーネントの構造は次のとおり：

ステップバイステップ・ハンズオンワークフロー

任意の技術ブログ投稿を、ブラウザタブから完全レンダリング済みプレゼンデックへ、五つの単純ステップで持っていく方法。

+-----------------------------------------------------------------------------------+
5 ステップ DEVELOPER FLOW

1. ブログ URL を Kiro agent へ送る
2. Agent が自動取得、言語検出、レンダリングを実行
3. ローカル hot-reload プレビューサーバを起動（localhost:3030）
4. 自然言語での反復とフォーマット調整
5. 本番 PPTX / PDF / PNG へエクスポート
+-----------------------------------------------------------------------------------+

ステップ 1：リンクを Kiro へ送る

プロジェクトワークスペースで Kiro を開き、平易な言葉の prompt を出す：

Turn this blog post into a PPT:
https://builder.aws.com/content/3EcuvO5GFJY06xS7DyCvk6KQMKk/

特定のプレゼン制約があるなら、指示へ直接追加する：

Turn this blog post into a PPT with no more than 20 slides:
https://builder.aws.com/content/3EcuvO5GFJY06xS7DyCvk6KQMKk/

ステップ 2：Kiro がボンネット下で行うこと

Kiro がリンクを受け取ると、多段階パイプラインを実行する：

1. 決定的 Web 取得： まず高速 HTTP fetch を試みる。対象が重い Single Page Application（SPA）——builder.aws.com、Substack、Medium など——なら、完全な動的コンテンツを捉えるためヘッドレスブラウザの rendered モードへ自動切替。

2. 言語検出： テキスト密度を分析する。コンテンツが主に中国語なら lang: zh を設定し、そうでなければデフォルトで lang: en。システムタイポグラフィと Mermaid ラベルフォントが自動適応。

3. テンプレート取り込み： 1 バイトも書く前に、Kiro は ppt-aws-theme-demo/slides.md と pages/ 下の全サブページを読み、正確なレイアウトルールと Vue コンポーネントパラメータを吸収する。

4. 隔離プロジェクト作成： ppt-{normalized-topic-name}/ 命名スキームで隔離フォルダを生成する。参照テンプレートは決して変更せず、ワークスペースルートの衛生を保つ。

5. スライドコンテンツ生成： カバーページ、セクション区切り、構造化本文スライド、クロージングページを起草する。10 枚超のデックは pages/ 下のモジュラー章ファイルへ自動分割。

6. スマート Vue コンポーネント割当： * 単一のインパクト指標 -> StatCard * 逐次イベントやロードマップ -> Timeline * 並置のトレードオフ -> ComparisonTable * 複雑な表形式データセット（>4 メトリクス）-> 標準 Markdown テーブル

ステップ 3：ローカル Hot-Reload プレビュー

生成後、Kiro はターミナル実行コマンドを提供する：

npm install && npx slidev ppt-{topic-name}/slides.md

これを実行すると http://localhost:3030/ でローカル Vite 開発サーバが起動する。

• 手動の markdown 編集は即座にブラウザ hot-reload をトリガーする。

• スピーカーノート付き専用プレゼンターモードは http://localhost:3030/presenter/。

• 俯瞰スライドグリッドは http://localhost:3030/overview/。

ステップ 4：自然言語での反復

特定スライドの密度や背景アクセントが気に入らない？Kiro と直接チャットして出力を調整する：

The cost breakdown page has too much text — split it into two slides.
Use a forest-green gradient for the final closing slide.
Replace the bar chart with a Timeline component listing three major milestones.

Kiro は対応 Markdown ファイルを即座に編集し、ローカルサーバが変更を hot-reload する。

ステップ 5：PowerPoint または PDF へエクスポート

クライアントピッチデックやエンタープライズ会議向けのネイティブファイルを生成するには、エクスポートツールを実行する：

# Export as editable PowerPoint
npx slidev export ppt-{topic-name}/slides.md --format pptx

# Export as PDF document
npx slidev export ppt-{topic-name}/slides.md

（注：初回エクスポートは playwright-chromium のインストールを促す。一度承認すれば、以後の実行でキャッシュされる。）

コマンド早見表とクイックスタートループ

急ぐ開発者向けのクイックコマンド列：

実世界ケーススタディ：Amazon EC2 上への OpenClaw デプロイ

ライブセッションで、Haowen は実際の Amazon Web Services 開発者記事を使ってワークフローをデモした：

[https://builder.aws.com/content/3CQFzc91nM9sGkfHRbpjo4eXojf/deploying-openclaw-on-amazon-ec2-a-developers-perspective](https://builder.aws.com/content/3CQFzc91nM9sGkfHRbpjo4eXojf/deploying-openclaw-on-amazon-ec2-a-developers-perspective)

およそ 3 分で、Kiro は四つの章に分類された 17 枚のモジュラースライド を含む ppt-openclaw-aws-ec2/ を構築した：

FAQ スライドは、複雑な AWS Systems Manager（SSM）コマンドと bash 構文を、完璧なアライメントとダークモードコードシンタックスハイライト付きのきれいな二カラムレイアウトへ自動レンダリングした。

+-----------------------------------------------------------------------------------+
例：17 枚 SLIDE DECK 構造

カバーページ
  --> Part 1: What is OpenClaw     機能と動機
  --> Part 2: Architecture         Mermaid 図と SSM トンネル
  --> Part 3: Deployment Guide     AWS EC2 とリージョン手順
  --> Part 4: FAQ and Operations   二カラム bash スニペット
クロージングページ
+-----------------------------------------------------------------------------------+

深掘り：.kiro/steering/skill.md の内側

このシステムを駆動する核心知能は .kiro/steering/skill.md だ。予測不能なワンショット prompt に頼る代わりに、Kiro は毎セッション開始時にこの Steering ファイルを自動ロードし、七つの主要領域で厳格な標準を強制する：

1. 作業ディレクトリ戦略

• すべてのプレゼンデックは ppt-{normalized-topic-name}/ に収める。

• 参照テンプレート（ppt-aws-theme-demo/ と ppt-aws-theme-demo-cn/）は会話横断の汚染を防ぐため 読み取り専用 とマーク。

• テーマパスはデフォルトで theme: ../theme-aws-dark。

2. インテリジェントなブログ取得とフォールバック

• 一次試行として webFetch(url, mode="full") を実行。

• 返却ペイロードが <500 バイト、ペイウォール／ログインゲートを示す、またはナビヘッダーのみの場合、mode="rendered"（JavaScript 実行可能なフルブラウザエンジン）へ自動アップグレード。

• ハードルール： 取得失敗時にコンテンツを捏造・幻覚生成してはならない。ユーザーに直接知らせ、テキスト入力を求める。

3. 言語と国際化（i18n）ルール

• 主に中国語のテキストには自動で lang: zh；それ以外はデフォルト lang: en。

• lang: zh が有効なとき、テーマは本文フォントスタックを PingFang SC、HarmonyOS Sans SC、Noto Sans SC へ切替え、欠落した Google Web Fonts でのレイアウト崩れを防ぐローカルフォント上書きを適用。

4. 商標コンプライアンスマトリクス

中国語プレゼンデックで企業・ブランド標準を保つため、Kiro は置換ルックアップテーブルを適用する：

Amazon Bedrock、Amazon EC2、Amazon S3 などの完全サービストレードマークはそのまま保持。lang: zh では、ロゴとフッターはテーマにより自動抑制される。

5. 8 ステップ実行プロトコル

Kiro はこれらのアクションを厳密に順に実行する：

1. 参照テンプレート（slides.md と pages/*.md）を読む。

2. プロジェクトディレクトリを初期化する。

3. 完全なスライドコンテンツを起草する。

4. 長いスライドセット（>10 枚）をモジュラー章ページへ分割する。

5. 静的アセットを含める。

6. ローカルプレビュー CLI コマンドを出力する。

7. 自然言語フィードバック反復を適用する。

8. エクスポート向けに最終化する。

6. コンテンツ密度とレイアウト標準

• 密度上限： ページあたり最大 7 箇条書き。超過コンテンツは複数カラムまたは複数ページへ分割必須。

• Mermaid アーキテクチャ標準： 図は 3〜5 のコアノードに留め、ノードラベルを簡潔にし、視覚オーバーフロー防止のため {scale: 0.7} または {scale: 0.8} スケールパラメータを適用。

• アイコン選択： 未検証アイコンパッケージより標準 unicode 絵文字（🚀、✅、💡）を優先。

• 画像スケーリング： 埋め込みアセットすべてに {width=500px} や {width=60%} のような明示幅制約を強制。

• ゼロアニメーション制約： Vue アニメーション（v-click、v-clicks、v-motion）を直接禁止。静的安定性が PDF と PPTX 変換の完璧さを保証する。

7. 自動化 20+ 項目品質チェックリスト

制御をユーザーへ返す前に、agent は 20+ 点チェックリストに対し出力を静かに検証する（アセット幅、レイアウト密度、ゼロアニメーション規則、構文整合性を確認）。

安定性を保証するコアエンジニアリング判断

数十年クラウド開発ワークフローをレビューしてきた私にとって、Haowen のシステムにある三つのアーキテクチャ選択は特に見事だった：

1. Steering ファイル vs. システムプロンプト

巨大な prompt をチャットバーへ投げる代わりに、慣例は .kiro/steering/skill.md に一度書く。Summit 前半で Shiro Seike が AWS クラウドアーキテクチャ標準を CLAUDE.md へ符号化して示したのと同様に、Haowen は プレゼンテーションエンジニアリング が同一の steering 規律から利益を得ることを示した。

2. 制約されたデザインシステム

theme-aws-dark/ は意図的に 八つのレイアウトタイプと三つのカスタム Vue コンポーネント のみを提供する。視覚選択肢を制限することで、AI agent はほぼ同一のレイアウト間で混乱せず、毎回きれいで予測可能な結果を生む。

3. プリセットアーキテクチャスニペット

生成 AI に複雑なアーキテクチャ図をゼロから構築させる代わりに、theme-aws-dark/snippets/architectures/ が標準 AWS インフラ（Web Apps、Serverless、AI Agents、Data Pipelines）向けの実戦済み Mermaid テンプレートを提供する。agent はラベルをリネームし接続ノードを調整するだけだ。

パイプライン拡張：エンタープライズと投資家ユースケース

技術ブログ向けに設計されたが、Hong Kong Summit Developer Lounge の開発者は、このワークフローが他の構造化入力形式も処理することをすぐに発見した：

• 会議トランスクリプトと振り返り： 経営層トランスクリプトをきれいなステークホルダー要約デックへ変換。

• スタートアップ README とピッチデック： オープンソース GitHub リポジトリを、プライベート VC ミートアップ向けの磨き上げた投資家アップデートへ変換。

• 内部アーキテクチャ仕様： 技術 markdown ドキュメントをチームエンジニアリングブリーフィングへ変換。

コアエンジンが Markdown、Vue 3、Vite に依存するため、すべてのデックは標準 git ワークフローでバージョン管理可能——独自ファイルロックなし、ソフトウェアサブスクリプションのペイウォールなし、視覚的な雑然さもなし。

自分で試す：クイックスタートガイド

ローカルワークステーションでワークフローを試すには、次のコマンドを実行する：

# Clone the repository
git clone https://github.com/hanyun2019/kiro-slidev-ppt-maker.git

# Navigate into the project directory
cd kiro-slidev-ppt-maker

# Open Kiro IDE and send your prompt:
# "Turn this blog post into a PPT: <YOUR-URL-HERE>"

2026 Developer Lounge からの最終現地ノート

香港スカイラインのネオンが湾仔の水面にまたたくなか、AWS Hong Kong Summit 2026 の最終テイクアウェイは明確になった：開発者生産性の未来は、spec 駆動で決定的だ。

Amazon Bedrock 上にエンタープライズ AI agent を構築するにせよ、ローカルユーザーグループ向けにスライドを整形するにせよ、標準を Steering ファイルへ符号化すれば、何時間もの無給労働が、単純で信頼できる 3 分ループへ変わる。

AWS Hong Kong Summit 2026 Developer Lounge からのライブ報告。全 6 本の振り返りシリーズはこれで完結！