AWS Hong Kong Summit 2026 · Developer Lounge 精華回顧

三分鐘用 Kiro 把部落格變簡報

講者: Haowen Huang 篇次: 6 / 6

AWS Hong Kong Summit 2026 · Developer Lounge 精華回顧 · 第 6 / 6 篇

AWS Magazine · 維多利亞港現場報導

開場：高科技奢華感 × 海濱氛圍

若你曾在 AWS Hong Kong Summit 2026 期間，站在香港會議展覽中心（HKCEC）那條落地玻璃長廊上，你一定記得那種感覺：維多利亞港全景盡收眼底，霓虹倒影在深色水面上流動，高風險科技與全球金融在此交會的低頻嗡鳴。

在灣仔核心地帶，數百萬美元的創投與新創交易，在手工沖煮茶與義式濃縮咖啡旁悄然推進。國際講者與雲端架構師從東京、倫敦、矽谷飛來，齊聚 AWS Developer Lounge（開發者休憩區）。現場電力十足——香港標誌性的奢華感，與 AWS 前衛的雲端美學形成鮮明對比。

在私人投資人聚會、新創 pitch deck 與技術深潛之間，Developer Lounge 迎來了本系列最後一場 session。資深技術寫作者都懂：每一場經典 summit 的收尾，總有一場讓人覺得「這份禮袋帶得走、搭飛機就能用」的演講。

在 Developer Lounge 系列的最終章，Haowen Huang 帶來一場大師級示範：如何把長篇技術內容，在三分鐘內轉成精緻、可給高階主管看的簡報。

電梯簡報： 把 Amazon Web Services 部落格 URL 交給 Kiro，大約三分鐘後，就能拿到一套自訂主題、可上線品質的 slide deck——內含 Vue 元件、響應式架構圖，零手動排版麻煩——可直接匯出成 PowerPoint（PPTX）、PDF 或 PNG。

+-----------------------------------------------------------------------------------+
三分鐘 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 以 Kiro 與 Slidev 工作流程為 Developer Lounge 畫下句點：把 AWS 部落格 URL 在約三分鐘內轉成精緻簡報。在 .kiro/steering/skill.md 的引導下，agent 擷取內容、偵測語言、套用 theme-aws-dark Vue 元件，並匯出 PPTX、PDF 或 PNG——以可確定、可版本控管的 Markdown pipeline，取代 meetup 上無酬的設計工時；builder 可 clone、迭代，在搭機返家途中就能跑起來。

技術資源與儲存庫

在進入實作拆解之前，先把這些必備儲存庫與工具加入書籤：

沒人預算的那一小時（香港 meetup 怎麼解）

我們都遇過。你讀完一篇關於 Amazon EC2、Amazon Bedrock 或 Serverless pipeline 的精彩架構拆解，想拿來向工程團隊、本地 AWS User Group，或潛在 seed 投資人簡報。

傳統做 slide 的流程出了名的繁瑣：

  1. 打開 PowerPoint、Keynote 或 Google Slides。

  2. 複製貼上段落，費力濃縮成條列重點。

  3. 花一小時對齊、調字級、拉框大小。

  4. 白白浪費 1 到 2 小時純設計工時——明明核心技術內容早就寫好了！

在香港快節奏的新創生態裡，社群主辦人每次本地 meetup 前都要熬夜排版 slide。Haowen 的專案把這些無酬設計勞力，轉成可確定的 三分鐘 AI agent loop。省下的時間與資源，可以立刻回流到招募工程師、爭取贊助、舉辦私人 founder meetup。

技術棧：專案架構裡有什麼？

這套 workflow 結合 Slidev（以 Vue 3 與 Vite 為基礎、Markdown 驅動、developer-first 的 slide 簡報工具）與 Kiro（由 spec 與 steering 檔案引導的 AI agentic 開發環境）。

專案元件結構如下：

元件目錄 / 檔案 技術角色與用途
theme-aws-dark/ 自訂 Slidev 主題，深色漸層背景靈感來自 AWS keynote 與香港港灣夜景。包含三個核心 Vue 元件：StatCard、Timeline、ComparisonTable。
ppt-aws-theme-demo/ & ppt-aws-theme-demo-cn/ 英文與中文參考版型模板，示範正確語法、元件用法與結構標準。
.kiro/steering/skill.md Kiro 的「Steering 大腦」檔案，強制目錄結構、語言自動偵測、密度上限、元件選擇與輸出慣例。
Preset Mermaid Architecture Snippets 預先設定的 Mermaid 圖表區塊，涵蓋常見 AWS 雲端模式（Web App、Serverless API、AI Agent、Data Pipeline）。

逐步實作工作流程

以下說明如何只用五個簡單步驟，把任何技術部落格從瀏覽器分頁變成完整渲染的簡報 deck。

+-----------------------------------------------------------------------------------+
五步驟 DEVELOPER 流程

1. 將部落格 URL 送給 Kiro agent
2. Agent 自動擷取、語言偵測與渲染
3. 啟動本地 hot-reload 預覽伺服器（localhost:3030）
4. 自然語言迭代與格式微調
5. 匯出正式版 PPTX / PDF / PNG
+-----------------------------------------------------------------------------------+

步驟 1：把連結交給 Kiro

在專案 workspace 中開啟 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 收到連結後，會執行多階段 pipeline：

  1. Deterministic Web Fetching： 先嘗試快速 HTTP fetch。若目標是重量級 Single Page Application（SPA）——例如 builder.aws.com、Substack 或 Medium——會自動切換到 headless browser rendered 模式，擷取完整動態內容。

  2. Language Detection： 分析文字密度。若內容以中文為主，設定 lang: zh；否則預設 lang: en。系統 typography 與 Mermaid 標籤字體會自動調整。

  3. Template Ingestion： 在寫入任何一個 byte 之前，Kiro 會讀取 ppt-aws-theme-demo/slides.md 與 pages/ 下所有子頁，吸收精確的版型規則與 Vue 元件參數。

  4. Isolated Project Creation： 以 ppt-{normalized-topic-name}/ 命名規則產生獨立資料夾。參考模板永不修改，workspace 根目錄保持整潔。

  5. Slide Content Generation： 起草封面、章節分隔頁、結構化內文 slide 與結尾頁。超過 10 張 slide 的 deck 會自動拆成 pages/ 下的模組化章節檔。

  6. Smart Vue Component Assignment： * 單一醒目指標 -> StatCard * 時序事件或 roadmap -> 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/ 進入專用 presenter 模式（含 speaker notes）。

  • 前往 http://localhost:3030/overview/ 檢視鳥瞰式 slide 網格。

步驟 4：自然語言迭代

不喜歡某張 slide 的密度或背景 accent？直接跟 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

若要產生原生檔案供客戶 pitch deck 或企業會議使用，執行 export 工具：

# 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

（注意：首次 export 會提示安裝 playwright-chromium。核准一次後，後續執行都會快取。）

指令速查表與快速啟動 loop

趕時間的 developer 可直接用這組指令序列：

目標 指令 / 動作
產生 Deck 將部落格 URL 貼入 Kiro chat prompt。
本地 Web 預覽 npx slidev ppt-{topic}/slides.md
匯出 PPTX npx slidev export ppt-{topic}/slides.md --format pptx
匯出 PDF npx slidev export ppt-{topic}/slides.md
匯出 PNG 圖片 npx slidev export ppt-{topic}/slides.md --format png

實戰案例：在 Amazon EC2 上部署 OpenClaw

現場 session 中，Haowen 以一篇真實 Amazon Web Services developer 文章示範 workflow：

[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)

約三分鐘內，Kiro 建出 ppt-openclaw-aws-ec2/，包含 17 張模組化 slide，分為四個章節：

章節 Slide 內容與架構重點
Part 1: What is OpenClaw 核心功能集、商業動機與部署價值主張。
Part 2: Architecture Mermaid 雲端架構圖、基礎設施取捨、成本估算與 IAM 前置條件。
Part 3: Deployment Guide 一鍵 US region 部署腳本、參數設定、AWS Systems Manager（SSM）tunnel 設定與多 region 部署選項。
Part 4: Configuration & FAQ 雙欄程式碼片段、營運 bash 指令、常見疑難排解與重點整理。

FAQ slide 自動把複雜的 AWS Systems Manager（SSM）指令與 bash 語法，渲染成整齊的雙欄版型，對齊完美，並附 dark-mode 程式碼語法高亮。

+-----------------------------------------------------------------------------------+
範例：17 張 SLIDE DECK 結構

封面
  --> Part 1: What is OpenClaw     功能與動機
  --> Part 2: Architecture         Mermaid 圖與 SSM tunnel
  --> Part 3: Deployment Guide     AWS EC2 與區域部署步驟
  --> Part 4: FAQ and Operations   雙欄 bash 片段
結尾頁
+-----------------------------------------------------------------------------------+

深潛：.kiro/steering/skill.md 內部

驅動這套系統的核心智慧，是 .kiro/steering/skill.md。Kiro 不靠不可預測的一次性 prompt，而是在每次 session 開始時自動載入這份 Steering 檔，在七個主要領域強制嚴格標準：

1. 工作目錄策略

  • 每份簡報 deck 放在 ppt-{normalized-topic-name}/。

  • 參考模板（ppt-aws-theme-demo/ 與 ppt-aws-theme-demo-cn/）標記為 read-only，避免跨對話污染。

  • 主題路徑預設 theme: ../theme-aws-dark。

2. 智慧部落格擷取與 fallback

  • 主要嘗試執行 webFetch(url, mode="full")。

  • 若回傳 payload <500 bytes、表示 paywall/login gate，或只含導覽 header，會自動升級為 mode="rendered"（執行完整 browser engine，可跑 JavaScript）。

  • 硬性規則： 若擷取失敗，絕不捏造或幻覺生成內容。直接告知使用者並請求文字輸入。

3. 語言與國際化（i18n）規則

  • 以中文為主的文字自動設定 lang: zh；否則預設 lang: en。

  • 當 lang: zh 生效時，主題將 body 字體堆疊切換為 PingFang SC、HarmonyOS Sans SC、Noto Sans SC，並套用本地字體 override，避免缺少 Google Web Fonts 時版型崩壞。

4. 商標合規矩陣

為維持中文簡報的企業與品牌標準，Kiro 套用替換查表：

來源詞彙 合規中文譯法標準
AWS Lambda Lambda
AWS web app Amazon Web Services web application
AWS services Amazon Web Services services
built on AWS built on Amazon Web Services

Amazon Bedrock、Amazon EC2、Amazon S3 等完整服務商標維持原樣。在 lang: zh 下，logo 與 footer 由主題自動抑制。

5. 八步驟執行協定

Kiro 嚴格依序執行以下動作：

  1. 讀取參考模板（slides.md 與 pages/*.md）。

  2. 初始化專案目錄。

  3. 起草完整 slide 內容。

  4. 將長 slide 集（>10 張）拆成模組化章節頁。

  5. 納入靜態資產。

  6. 輸出本地預覽 CLI 指令。

  7. 套用自然語言 feedback 迭代。

  8. 定稿以供 export。

6. 內容密度與版型標準

  • 密度上限： 每頁最多 7 個條列重點。超出內容必須拆成多欄或多頁格式。

  • Mermaid 架構標準： 圖表維持 3–5 個核心節點，節點標籤簡短，並套用 {scale: 0.7} 或 {scale: 0.8} 縮放參數，避免視覺溢出。

  • 圖示選擇： 優先使用標準 unicode emoji（🚀、✅、💡），而非未驗證的 icon 套件。

  • 圖片縮放： 所有嵌入資產強制明確寬度限制，如 {width=500px} 或 {width=60%}。

  • 零動畫限制： 直接禁止 Vue 動畫（v-click、v-clicks、v-motion）。靜態穩定確保 PDF 與 PPTX 轉檔無瑕疵。

7. 自動化 20+ 項品質檢查清單

在把控制權交還使用者之前，agent 會靜默依 20+ 點 checklist 驗證輸出（檢查資產寬度、版型密度、零動畫規則與語法完整性）。

保證穩定性的核心工程決策

檢視雲端開發 workflow 數十年後，我認為 Haowen 系統中有三項架構選擇特別精彩：

1. Steering 檔 vs. System Prompt

與其把龐大 prompt 丟進 chat bar，不如把慣例一次寫進 .kiro/steering/skill.md。正如 Shiro Seike 在本屆 Summit 較早場次示範，把 AWS 雲端架構標準編碼進 CLAUDE.md，Haowen 證明 presentation engineering 同樣受益於相同的 steering 紀律。

2. 受約束的設計系統

theme-aws-dark/ 刻意只提供 八種版型與三個自訂 Vue 元件。限制視覺選項後，AI agent 不會在幾乎相同的版型之間混淆，每次都能產出乾淨、可預測的結果。

3. 預設架構片段

與其請 generative AI 從零建構複雜架構圖，theme-aws-dark/snippets/architectures/ 提供久經實戰的 Mermaid 模板，涵蓋標準 AWS 基礎設施（Web Apps、Serverless、AI Agents、Data Pipelines）。agent 只需重新命名標籤並調整連線節點。

擴展 pipeline：企業與投資人使用情境

雖然圍繞技術部落格設計，Hong Kong Summit Developer Lounge 的 developer 很快發現，這套 workflow 也能處理其他結構化輸入格式：

  • 會議逐字稿與 recap： 把 executive 逐字稿轉成乾淨的 stakeholder 摘要 deck。

  • 新創 README 與 pitch deck： 把 open-source GitHub 儲存庫變成精緻的投資人更新，供私人 VC meetup 使用。

  • 內部架構 spec： 把技術 markdown 文件變成團隊 engineering briefing。

因為核心引擎依賴 Markdown、Vue 3 與 Vite，每份 deck 都可用標準 git workflow 版本控管——沒有專有檔案鎖、沒有軟體訂閱 paywall、沒有視覺雜訊。

自己試試：快速入門指南

要在本地 workstation 測試 workflow，執行以下指令：

# 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 的最終啟示變得清晰：developer 生產力的未來，是 spec-driven 且可確定的。

無論你在 Amazon Bedrock 上建 enterprise AI agent，還是為本地 user group 排版 slide，把標準編碼進 Steering 檔，就能把數小時無酬勞力，變成簡單、可靠的三分鐘 loop。

現場報導自 AWS Hong Kong Summit 2026 Developer Lounge。六篇 recap 系列到此完結！