Mục lục:
- Vấn đề: Vì sao việc tạo slide từ code lại tốn thời gian
- Ý tưởng cốt lõi của bài viết
- Quy trình tạo slide từng bước (Step-by-Step)
- Bước 1: Chuẩn bị code nguồn
- Bước 2: Cho AI đọc và hiểu code
- Bước 3: Sinh prompt tạo infographic
- Bước 4: Chuẩn hóa yêu cầu nội dung slide
- Bước 5: Tạo slide bằng công cụ image generation
- Điểm đặc biệt của phương pháp này
- Khi nào nên áp dụng cách làm này
- Thực hành
1. Giới thiệu
Trong các buổi thuyết trình kỹ thuật, hackathon hoặc review kiến trúc hệ thống, việc tạo slide để giải thích thuật toán từ code thường tốn nhiều thời gian.
Bài viết của Yusuke trên note.com giới thiệu một cách tiếp cận mới: để AI đọc code và tự động tạo slide/infographic, giúp tiết kiệm đáng kể công sức chuẩn bị.
2. Vấn đề: Vì sao việc tạo slide từ code lại khó
Thông thường, quy trình truyền thống là:
- Đọc lại code
- Tự phân tích logic
- Viết nội dung slide bằng tay
- Thiết kế bố cục, sơ đồ
Cách làm này:
- Tốn thời gian
- Dễ sai lệch so với implementation thực tế
- Không phù hợp trong môi trường gấp rút như hackathon
3. Ý tưởng cốt lõi của bài viết
Thay vì “viết slide”, ta:
- Cho AI đọc code
- Để AI tạo prompt sinh infographic
- Dùng prompt đó để tạo slide hoàn chỉnh
4. Quy trình tạo slide từng bước
Bước 1: Chuẩn bị code nguồn
Code chứa logic thực tế (ví dụ: xử lý nhiều OCR, loại bỏ trùng lặp, grouping receipt, hay sử dụng deeplink trên các ứng dụng điện thoại) được dùng làm đầu vào.
Code này đóng vai trò là single source of truth cho nội dung slide.
Trong bài viết này tôi sẽ sử dụng source-code chứa flow giải thích cách hoặc động của deeplink trong ứng dụng Flutter
Bước 2: Cho AI đọc và hiểu code
Toàn bộ code liên quan được đưa vào một AI có khả năng hiểu code (Claude Code).
Yêu cầu AI:
- Đọc kỹ code
- Hiểu flow xử lý
- Xác định các bước chính của thuật toán
Quan trọng: chưa tạo slide ở bước này.
Bước 3: Sinh prompt tạo infographic
Sau khi AI hiểu code, tác giả yêu cầu AI:
- Không tạo slide trực tiếp
- Mà tạo prompt dùng cho image generation
Prompt này mô tả:
- Nội dung slide
- Các bước xử lý
- Văn bản hiển thị trên slide
- Bố cục tổng thể
Bước 4: Chuẩn hóa yêu cầu nội dung slide
Prompt có các ràng buộc rõ ràng:
- Slide chỉ gồm 1 trang
- Sử dụng tiếng Nhật
- Nội dung trừu tượng, dễ hiểu cho người mới
- Có text cụ thể để giải thích từng bước
Nhờ vậy, slide sinh ra không mơ hồ mà có thể dùng ngay.
Bước 5: Tạo slide bằng công cụ image generation
Prompt được đưa vào công cụ tạo ảnh như:
- Nano Banana Pro (Gemini)
- Hoặc các công cụ tương tự
Kết quả là một slide/infographic hoàn chỉnh, có thể dùng trực tiếp cho thuyết trình.
5. Điểm đặc biệt của phương pháp này
- Không cần viết slide thủ công
- Nội dung slide luôn khớp với code
- Phù hợp với hackathon, demo kỹ thuật, design review
- Có thể tái sử dụng cho nhiều project khác nhau
6. Khi nào nên áp dụng cách làm này
Phương pháp này đặc biệt phù hợp khi:
- Cần giải thích thuật toán phức tạp
- Thời gian chuẩn bị ngắn
- Muốn đảm bảo slide phản ánh đúng implementation
7. Thực hành
Đây là 2 file ảnh kết quả:
Prompt1 là:
Create a modern, clean infographic in landscape orientation (16:9 ratio), with a left-to-right flow diagram. Use a professional color scheme with soft blues, greens, and whites. Include icons and simple illustrations for each step. The design should be beginner-friendly with clear visual hierarchy.
## Title (Top Center)
**大きなタイトル**: "QRコード読み取りの流れ" (Luồng Quét QR Code)
## Main Content - Two Flows Side by Side
### Flow 1: アプリ内でQRコードを読み取る (Quét QR trong App) - Left Side
**見出し**: "アプリ内で読み取る場合" (Khi quét trong app)
**ステップ1**:
- アイコン: 📱 スマートフォン
- テキスト: "アプリを開く" (Mở app)
- 説明: "QRコード読み取り画面を開きます" (Mở màn hình quét QR)
**ステップ2**:
- アイコン: 📷 カメラ
- テキスト: "カメラでQRコードをスキャン" (Quét QR bằng camera)
- 説明: "カメラの許可が必要です" (Cần quyền camera)
**ステップ3**:
- アイコン: 🔍 解析
- テキスト: "QRコードを解析" (Phân tích QR code)
- 説明: "コードの内容を確認します" (Kiểm tra nội dung code)
**ステップ4**:
- アイコン: 🔓 ロック解除
- テキスト: "自動でドアを開ける" (Tự động mở cửa)
- 説明: "サーバーに接続してドアを開けます" (Kết nối server và mở cửa)
**ステップ5**:
- アイコン: 🛒 ショッピングカート
- テキスト: "商品選択画面へ" (Chuyển đến màn hình chọn sản phẩm)
- 説明: "商品を取り出すことができます" (Có thể lấy sản phẩm)
**ステップ6**:
- アイコン: ⏱️ タイマー
- テキスト: "ドアの状態を確認" (Kiểm tra trạng thái cửa)
- 説明: "2秒ごとにドアが閉まったか確認します" (Kiểm tra cửa đóng mỗi 2 giây)
**ステップ7**:
- アイコン: ✅ チェック
- テキスト: "ドアが閉まったら" (Khi cửa đóng)
- 説明: "タイマーが自動で止まります" (Timer tự động dừng)
**ステップ8**:
- アイコン: 💳 支払い
- テキスト: "決済画面へ進む" (Tiến đến màn hình thanh toán)
- 説明: "購入手続きを開始します" (Bắt đầu thủ tục mua hàng)
**矢印**: Tất cả các bước được nối bằng mũi tên màu xanh từ trái sang phải (→)
## Visual Elements
- Use rounded rectangles for each step box
- Color code: Blue for app flow, Green for external flow
- Include small icons (emoji style or simple line icons)
- Use arrows (→) to show flow direction
- Add subtle shadows for depth
- Keep text large and readable (minimum 14pt equivalent)
- Use white or light background with good contrast
## Color Palette
- Primary Blue: #4A90E2 (for app flow)
- Primary Green: #50C878 (for external flow)
- Warning Yellow: #FFD700 (for important notes)
- Background: #F5F7FA (light gray)
- Text: #2C3E50 (dark gray)
- Arrows: #3498DB (blue)
## Typography
- Title: Bold, large (24-28pt equivalent)
- Step headers: Semi-bold, medium (16-18pt equivalent)
- Descriptions: Regular, small (12-14pt equivalent)
- Use Japanese-friendly font (like Noto Sans JP style)
---
Prompt 2 là:
Create a modern, clean infographic in landscape orientation (16:9 ratio), with a left-to-right flow diagram. Use a professional color scheme with soft blues, greens, and whites. Include icons and simple illustrations for each step. The design should be beginner-friendly with clear visual hierarchy.
## Title (Top Center)
**大きなタイトル**: "QRコード読み取りの流れ" (Luồng Quét QR Code)
## Main Content - Two Flows Side by Side
### Flow 1: アプリ内でQRコードを読み取る (Quét QR trong App) - Left Side
**見出し**: "アプリ内で読み取る場合" (Khi quét trong app)
**ステップ1**:
- アイコン: 📱 スマートフォン
- テキスト: "アプリを開く" (Mở app)
- 説明: "QRコード読み取り画面を開きます" (Mở màn hình quét QR)
**ステップ2**:
- アイコン: 📷 カメラ
- テキスト: "カメラでQRコードをスキャン" (Quét QR bằng camera)
- 説明: "カメラの許可が必要です" (Cần quyền camera)
**ステップ3**:
- アイコン: 🔍 解析
- テキスト: "QRコードを解析" (Phân tích QR code)
- 説明: "コードの内容を確認します" (Kiểm tra nội dung code)
**ステップ4**:
- アイコン: 🔓 ロック解除
- テキスト: "自動でドアを開ける" (Tự động mở cửa)
- 説明: "サーバーに接続してドアを開けます" (Kết nối server và mở cửa)
**ステップ5**:
- アイコン: 🛒 ショッピングカート
- テキスト: "商品選択画面へ" (Chuyển đến màn hình chọn sản phẩm)
- 説明: "商品を取り出すことができます" (Có thể lấy sản phẩm)
**ステップ6**:
- アイコン: ⏱️ タイマー
- テキスト: "ドアの状態を確認" (Kiểm tra trạng thái cửa)
- 説明: "2秒ごとにドアが閉まったか確認します" (Kiểm tra cửa đóng mỗi 2 giây)
**ステップ7**:
- アイコン: ✅ チェック
- テキスト: "ドアが閉まったら" (Khi cửa đóng)
- 説明: "タイマーが自動で止まります" (Timer tự động dừng)
**ステップ8**:
- アイコン: 💳 支払い
- テキスト: "決済画面へ進む" (Tiến đến màn hình thanh toán)
- 説明: "購入手続きを開始します" (Bắt đầu thủ tục mua hàng)
**矢印**: Tất cả các bước được nối bằng mũi tên màu xanh từ trái sang phải (→)
---
---
## Visual Elements
- Use rounded rectangles for each step box
- Color code: Blue for app flow, Green for external flow
- Include small icons (emoji style or simple line icons)
- Use arrows (→) to show flow direction
- Add subtle shadows for depth
- Keep text large and readable (minimum 14pt equivalent)
- Use white or light background with good contrast
## Color Palette
- Primary Blue: #4A90E2 (for app flow)
- Primary Green: #50C878 (for external flow)
- Warning Yellow: #FFD700 (for important notes)
- Background: #F5F7FA (light gray)
- Text: #2C3E50 (dark gray)
- Arrows: #3498DB (blue)
## Typography
- Title: Bold, large (24-28pt equivalent)
- Step headers: Semi-bold, medium (16-18pt equivalent)
- Descriptions: Regular, small (12-14pt equivalent)
- Use Japanese-friendly font (like Noto Sans JP style)Link file pptx: https://1drv.ms/p/c/a255c31ee0421c8d/IQC3sicv8bK9TaVmgN_3oXMSAduX9Rqo2-vPyjBIE5ZKaZw?e=B6gi81