極點宏觀｜Financial Cloud Cloud · AWS Re:cap
AWS Re:cap 06: 三分鐘用 Kiro 把部落格變簡報
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、迭代，在搭機返家途中就能跑起來。
技術資源與儲存庫
在進入實作拆解之前，先把這些必備儲存庫與工具加入書籤：
● 專案 GitHub 儲存庫： github.com/hanyun2019/kiro-slidev-ppt-maker
● Slidev 框架： sli.dev
● Kiro Agentic IDE： kiro.dev
沒人預算的那一小時（香港 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 系列到此完結！