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 系列到此完结！