Blog to Slides in Three Minutes with Kiro

AWS Hong Kong Summit 2026 · Developer Lounge Recap · Article 6 of 6

AWS Magazine · Field Report from Victoria Harbour

Opening: High-Tech Luxury Meets the Waterfront Vibe

If you have ever stood on the floor-to-ceiling glass concourse at the Hong Kong Convention and Exhibition Centre (HKCEC) during the AWS Hong Kong Summit 2026, you know the exact feeling: floor-to-ceiling panoramic views of Victoria Harbour, neon reflections dancing across dark water, and the distinct hum of high-stakes technology meeting global finance.

In the heart of Wan Chai, millions in venture capital and startup deals were being negotiated over hand-poured artisanal tea and espresso. International speakers and cloud architects flew in from Tokyo, London, and Silicon Valley to gather at the AWS Developer Lounge. The environment was electric—a juxtaposition of Hong Kong's signature luxury and AWS’s cutting-edge cloud aesthetic.

Between private investor meetups, startup pitch decks, and technical deep-dives, the Developer Lounge hosted its final session. And as any seasoned tech writer will tell you, every iconic summit ends with a talk that feels like a gift bag you can actually take home and use on your flights.

Closing out the Developer Lounge arc, Haowen Huang delivered a masterclass on turning long-form technical content into polished, executive-ready presentations in three minutes flat.

The Elevator Pitch: Give Kiro an Amazon Web Services blog URL and, in roughly three minutes, receive a custom-themed, production-grade slide deck—complete with Vue components, responsive architecture diagrams, and zero manual layout hassle—ready to export to PowerPoint (PPTX), PDF, or PNG.

+-----------------------------------------------------------------------------------+
THE 3-MINUTE AGENT LOOP

1. [ Tech Blog / URL ]
2. [ Kiro AI Agent Engine ]  -->  reread .kiro/steering/skill.md
3. [ Slidev Engine + theme-aws-dark ]  -->  render Vue components
4. [ Local Preview :3030 ]  -->  export PPTX / PDF / PNG
+-----------------------------------------------------------------------------------+

At AWS Hong Kong Summit 2026, Haowen Huang closed the Developer Lounge with a Kiro and Slidev workflow that turns AWS blog URLs into polished decks in about three minutes. Guided by .kiro/steering/skill.md, the agent fetches content, detects language, applies theme-aws-dark Vue components, and exports PPTX, PDF, or PNG—replacing unpaid meetup design work with a deterministic, version-controllable Markdown pipeline that builders can clone, iterate, and run on the flight home.

Technical Resources & Repositories

Before diving into the hands-on breakdown, bookmark these essential repositories and tools:

• Project GitHub Repository: github.com/hanyun2019/kiro-slidev-ppt-maker

• Slidev Framework: sli.dev

• Kiro Agentic IDE: kiro.dev

The Expensive Hour Nobody Budgets (And How HK Meetups Fix It)

We have all been there. You read a stellar architecture breakdown on Amazon EC2, Amazon Bedrock, or Serverless pipelines, and you want to present it to your engineering team, a local AWS User Group, or potential seed investors.

The traditional slide creation flow is notoriously tedious:

1. Open PowerPoint, Keynote, or Google Slides.

2. Copy and paste paragraphs, painstakingly reducing them to bullet points.

3. Spend an hour alignment-hunting, tweaking font sizes, and adjusting box dimensions.

4. Waste 1 to 2 hours of pure design overhead—even though the core technical content was already written!

In Hong Kong’s fast-moving startup ecosystem, community organizers burn late nights formatting slides before every local meetup. Haowen's project converts that unpaid design labor into a deterministic, three-minute AI agent loop. That represents saved time and resources that can immediately flow back into hiring engineers, securing sponsors, and funding private founder meetups.

The Stack: What Inside the Project Architecture?

This workflow combines Slidev (a developer-first, Markdown-driven slide presentation tool built on Vue 3 and Vite) with Kiro (an AI agentic development environment guided by specs and steering files).

Here is how the project components are structured:

Step-by-Step Hands-On Workflow

Here is how to take any technical blog post from a browser tab to a fully rendered presentation deck in five simple steps.

+-----------------------------------------------------------------------------------+
FIVE-STEP DEVELOPER FLOW

1. Send blog URL to Kiro agent
2. Agent runs automated fetch, language detection, and rendering
3. Launch local hot-reload preview server (localhost:3030)
4. Natural-language iteration and formatting tweaks
5. Export to production PPTX / PDF / PNG
+-----------------------------------------------------------------------------------+

Step 1: Send the Link to Kiro

Open Kiro in your project workspace and issue a plain-language prompt:

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

If you have specific presentation constraints, add them directly to the instruction:

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

Step 2: What Kiro Does Under the Hood

When Kiro receives your link, it executes a multi-stage pipeline:

1. Deterministic Web Fetching: First, it attempts a fast HTTP fetch. If the target is a heavy Single Page Application (SPA)—such as builder.aws.com, Substack, or Medium—it automatically switches to a headless browser rendered mode to capture full dynamic content.

2. Language Detection: It analyzes the text density. If the content is primarily Chinese, it configures lang: zh; otherwise, it defaults to lang: en. System typography and Mermaid label fonts adapt automatically.

3. Template Ingestion: Before writing a single byte, Kiro reads ppt-aws-theme-demo/slides.md and all sub-pages under pages/ to absorb exact layout rules and Vue component parameters.

4. Isolated Project Creation: It generates a isolated folder using the naming scheme ppt-{normalized-topic-name}/. Reference templates are never modified, and workspace root hygiene is maintained.

5. Slide Content Generation: It drafts a cover page, section dividers, structured body slides, and a closing page. Decks longer than 10 slides are automatically split into modular chapter files under pages/.

6. Smart Vue Component Assignment: * Single impactful metrics -> StatCard * Sequential events or roadmaps -> Timeline * Side-by-side trade-offs -> ComparisonTable * Complex tabular datasets (>4 metrics) -> Standard Markdown tables

Step 3: Local Hot-Reload Preview

Once generated, Kiro provides a terminal execution command:

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

Executing this boots up a local Vite development server at http://localhost:3030/.

• Any manual markdown edits instantly trigger a browser hot-reload.

• Navigate to http://localhost:3030/presenter/ for dedicated presenter mode with speaker notes.

• Navigate to http://localhost:3030/overview/ for a bird's-eye slide grid.

Step 4: Natural Language Iteration

Don't like a specific slide density or background accent? Chat directly with Kiro to adjust the output:

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 edits the corresponding Markdown files instantly while your local server hot-reloads the changes.

Step 5: Export to PowerPoint or PDF

To generate native files for client pitch decks or enterprise meetings, run the export tool:

# 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

(Note: The initial export will prompt you to install playwright-chromium. Approve it once, and it will be cached for all future runs).

Command Cheat Sheet & Quick-Start Loop

For developers in a hurry, here is the quick command sequence:

Real-World Case Study: Deploying OpenClaw on Amazon EC2

During the live session, Haowen demonstrated the workflow using an actual Amazon Web Services developer article:

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

In approximately three minutes, Kiro constructed ppt-openclaw-aws-ec2/ containing 17 modular slides categorized across four chapters:

The FAQ slides automatically rendered complex AWS Systems Manager (SSM) commands and bash syntax into neat, dual-column layouts with perfect alignment and dark-mode code syntax highlighting.

+-----------------------------------------------------------------------------------+
EXAMPLE 17-SLIDE DECK STRUCTURE

Cover Page
  --> Part 1: What is OpenClaw     Features and motivation
  --> Part 2: Architecture         Mermaid diagrams and SSM tunnel
  --> Part 3: Deployment Guide     AWS EC2 and regional steps
  --> Part 4: FAQ and Operations   Two-column bash snippets
Closing Page
+-----------------------------------------------------------------------------------+

Deep Dive: Inside .kiro/steering/skill.md

The core intelligence driving this system is .kiro/steering/skill.md. Rather than relying on unpredictable one-shot prompts, Kiro automatically loads this Steering file at the start of every session to enforce strict standards across seven primary domains:

1. Working-Directory Strategy

• Every presentation deck is housed in ppt-{normalized-topic-name}/.

• Reference templates (ppt-aws-theme-demo/ and ppt-aws-theme-demo-cn/) are marked read-only to prevent cross-conversation corruption.

• Theme paths default to theme: ../theme-aws-dark.

2. Intelligent Blog Fetching & Fallbacks

• Executes webFetch(url, mode="full") as primary attempt.

• If returned payload is <500 bytes, indicates a paywall/login gate, or contains only navigation headers, it automatically upgrades to mode="rendered" (running a full browser engine capable of executing JavaScript).

• Hard Rule: Never fabricate or hallucinate content if fetching fails. Inform the user directly and request text input.

3. Language & Internationalization (i18n) Rules

• Automatically sets lang: zh for predominantly Chinese text; otherwise defaults to lang: en.

• When lang: zh is active, the theme switches body font stacks to PingFang SC, HarmonyOS Sans SC, and Noto Sans SC, while applying local font overrides to prevent layout breaks on missing Google Web Fonts.

4. Trademark Compliance Matrix

To maintain corporate and brand standards in Chinese presentation decks, Kiro applies a replacement lookup table:

Full service trademarks such as Amazon Bedrock, Amazon EC2, and Amazon S3 are preserved as-is. Under lang: zh, logos and footers are suppressed automatically by the theme.

5. Eight-Step Execution Protocol

Kiro strictly executes these actions in sequence:

1. Read reference templates (slides.md and pages/*.md).

2. Initialize project directory.

3. Draft full slide content.

4. Split long slide sets (>10 slides) into modular chapter pages.

5. Include static assets.

6. Output local preview CLI commands.

7. Apply natural-language feedback iterations.

8. Finalize for export.

6. Content Density & Layout Standards

• Density Cap: Maximum of 7 bullet points per page. Excess content must split into multi-column or multi-page formats.

• Mermaid Architecture Standards: Diagrams must stick to 3–5 core nodes, keep node labels brief, and apply {scale: 0.7} or {scale: 0.8} scaling parameters to prevent visual overflow.

• Icon Selection: Prioritize standard unicode emojis (🚀, ✅, 💡) over unverified icon packages.

• Image Scaling: Enforce explicit width constraints like {width=500px} or {width=60%} on all embedded assets.

• The Zero-Animation Constraint: Direct ban on Vue animations (v-click, v-clicks, v-motion). Static stability ensures flawless PDF and PPTX file conversions.

7. Automated 20+ Item Quality Checklist

Before handing control back to the user, the agent silently validates its output against a 20+ point checklist (verifying asset widths, layout densities, zero-animation rules, and syntax integrity).

Core Engineering Decisions That Guarantee Stability

Having reviewed cloud development workflows for decades, I found three architectural choices in Haowen’s system particularly brilliant:

1. Steering Files vs. System Prompts

Instead of throwing massive prompts into a chat bar, conventions are written once inside .kiro/steering/skill.md. Just as Shiro Seike demonstrated encoding AWS cloud architecture standards into CLAUDE.md earlier in the Summit, Haowen showed that presentation engineering benefits from identical steering discipline.

2. A Constrained Design System

theme-aws-dark/ intentionally provides only eight layout types and three custom Vue components. By limiting visual choices, the AI agent never gets confused between near-identical layout choices, producing clean, predictable results every time.

3. Preset Architectural Snippets

Rather than asking generative AI to construct complex architecture diagrams from scratch, theme-aws-dark/snippets/architectures/ provides battle-tested Mermaid templates for standard AWS infrastructure (Web Apps, Serverless, AI Agents, Data Pipelines). The agent simply renames labels and adjusts connection nodes.

Expanding the Pipeline: Enterprise & Investor Use Cases

While designed around technical blogs, developers at the Hong Kong Summit Developer Lounge quickly discovered that this workflow processes other structured input formats:

• Meeting Transcripts & Recaps: Convert executive transcripts into clean stakeholder summary decks.

• Startup READMEs & Pitch Decks: Transform open-source GitHub repositories into polished investor updates for private VC meetups.

• Internal Architecture Specs: Turn technical markdown documentations into team engineering briefings.

Because the core engine relies on Markdown, Vue 3, and Vite, every deck remains version-controllable with standard git workflows—no proprietary file locks, no software subscription paywalls, and no visual clutter.

Try It Yourself: Quick Start Guide

To test the workflow on your local workstation, run the following commands:

# 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>"

Final Field Notes from the 2026 Developer Lounge

As the neon lights of the Hong Kong skyline flickered across the waters of Wan Chai, the final takeaway from AWS Hong Kong Summit 2026 became clear: The future of developer productivity is spec-driven and deterministic.

Whether you are building enterprise AI agents on Amazon Bedrock or formatting slides for your local user group, encoding your standards into Steering files turns hours of unpaid labor into simple, reliable three-minute loops.

Reported live from the AWS Hong Kong Summit 2026 Developer Lounge. That concludes our 6-part recap series!