---
title: "Chỉ mục bố cục và ảnh tham chiếu"
description: "Tài liệu Chỉ mục bố cục và ảnh tham chiếu trong agent-slide-studio."
document_type: reference-index
status: active
---

# Chỉ mục bố cục và ảnh tham chiếu

Đây là chỉ mục lựa chọn duy nhất. Chọn intent và topology trước, sau đó mở **đặc tả**, **preview riêng** và **ảnh mẫu thật**. Không đánh giá từ contact sheet hoặc tên file. Với ảnh mẫu, ghi rõ học điều gì và không học điều gì trong [deck plan](../04-templates/deck-plan.md).

## Cách chọn

1. Nhóm ngang hàng → grid/card; trình tự → process/timeline; vòng lặp → cycle; cấu thành → anatomy/layers/tree; đối chiếu → comparison/matrix; số liệu → chart/dashboard; thực hành → task/scorecard.
2. Chọn `L` khi cần cấu trúc quan hệ; chọn `I` khi cần cấu trúc kèm hình neo, icon và ví dụ thị giác.
3. Mở đặc tả của mã và PNG/SVG tương ứng. Ảnh thực chỉ dạy geometry, spacing, palette, icon, material và hierarchy; không cung cấp facts, text, logo hoặc claim.
4. Chốt density và style sau topology. Không tạo mã mới chỉ vì đổi màu.

## L01–L48 — bố cục cấu trúc

Mỗi liên kết mã mở đặc tả; `PNG` là preview riêng ở kích thước đầy đủ. Cột ảnh thật là ví dụ gần nhất để quan sát, không phải nguồn nội dung.

| Nhóm | Mã, đặc tả và preview | Ảnh thật nên mở | Học / không học |
|---|---|---|---|
| G01 Mở đầu & định hướng | [L01](layouts/archetypes/L01_cover.md) [PNG](gallery/layouts/L01.png) · [L02](layouts/archetypes/L02_roadmap.md) [PNG](gallery/layouts/L02.png) · [L20](layouts/archetypes/L20_background.md) [PNG](gallery/layouts/L20.png) · [L30](layouts/archetypes/L30_executive.md) [PNG](gallery/layouts/L30.png) · [L33](layouts/archetypes/L33_stat.md) [PNG](gallery/layouts/L33.png) · [L37](layouts/archetypes/L37_agenda.md) [PNG](gallery/layouts/L37.png) | [Nền navy](images/reference-set/06_navy.png), [R07](images/user-infographics/R07_5.3.png) | Học vùng trống/nhịp; không lấy chữ hay claim. |
| G02 Khái niệm & khung tư duy | [L03](layouts/archetypes/L03_anatomy.md) [PNG](gallery/layouts/L03.png) · [L10](layouts/archetypes/L10_bento.md) [PNG](gallery/layouts/L10.png) · [L24](layouts/archetypes/L24_pyramid.md) [PNG](gallery/layouts/L24.png) · [L25](layouts/archetypes/L25_rings.md) [PNG](gallery/layouts/L25.png) · [L26](layouts/archetypes/L26_venn.md) [PNG](gallery/layouts/L26.png) · [L38](layouts/archetypes/L38_formula.md) [PNG](gallery/layouts/L38.png) | [R04](images/user-infographics/R04_4.2.png), [R03](images/user-infographics/R03_2.1.png) | Học phân tầng/cụm; không coi mô hình trong ảnh là tài liệu chức năng. |
| G03 Quy trình & thời gian | [L05](layouts/archetypes/L05_process.md) [PNG](gallery/layouts/L05.png) · [L12](layouts/archetypes/L12_cycle.md) [PNG](gallery/layouts/L12.png) · [L17](layouts/archetypes/L17_ipo.md) [PNG](gallery/layouts/L17.png) · [L21](layouts/archetypes/L21_timeline.md) [PNG](gallery/layouts/L21.png) · [L22](layouts/archetypes/L22_swimlane.md) [PNG](gallery/layouts/L22.png) · [L34](layouts/archetypes/L34_gantt.md) [PNG](gallery/layouts/L34.png) | [Quy trình](images/reference-set/01_process.png), [R05](images/user-infographics/R05_4.3.png), [R06](images/user-infographics/R06_5.2.png) | Học nhịp thẻ/connector; không lấy lời hứa thực thi hay tự sửa luật. |
| G04 So sánh & quyết định | [L04](layouts/archetypes/L04_matrix.md) [PNG](gallery/layouts/L04.png) · [L06](layouts/archetypes/L06_comparison.md) [PNG](gallery/layouts/L06.png) · [L16](layouts/archetypes/L16_stair.md) [PNG](gallery/layouts/L16.png) · [L19](layouts/archetypes/L19_decision.md) [PNG](gallery/layouts/L19.png) · [L31](layouts/archetypes/L31_bridge.md) [PNG](gallery/layouts/L31.png) · [L40](layouts/archetypes/L40_tradeoff.md) [PNG](gallery/layouts/L40.png) | [So sánh](images/reference-set/02_comparison.png), [R02](images/user-infographics/R02_1.5.png) | Học baseline/cột/bậc; không dùng tỷ lệ 10/40/75/95% như dữ kiện. |
| G05 Kiến trúc & điều hành | [L07](layouts/archetypes/L07_layers.md) [PNG](gallery/layouts/L07.png) · [L11](layouts/archetypes/L11_hub.md) [PNG](gallery/layouts/L11.png) · [L15](layouts/archetypes/L15_tree.md) [PNG](gallery/layouts/L15.png) · [L27](layouts/archetypes/L27_network.md) [PNG](gallery/layouts/L27.png) · [L42](layouts/archetypes/L42_gates.md) [PNG](gallery/layouts/L42.png) · [L43](layouts/archetypes/L43_boundary.md) [PNG](gallery/layouts/L43.png) | [R03](images/user-infographics/R03_2.1.png), [R04](images/user-infographics/R04_4.2.png) | Học tầng/trụ/điểm kiểm; không sao chép tên hệ thống, logo, facts. |
| G06 Dữ liệu & bằng chứng | [L23](layouts/archetypes/L23_funnel.md) [PNG](gallery/layouts/L23.png) · [L28](layouts/archetypes/L28_dashboard.md) [PNG](gallery/layouts/L28.png) · [L29](layouts/archetypes/L29_chart.md) [PNG](gallery/layouts/L29.png) · [L35](layouts/archetypes/L35_sankey.md) [PNG](gallery/layouts/L35.png) · [L44](layouts/archetypes/L44_waterfall.md) [PNG](gallery/layouts/L44.png) · [L45](layouts/archetypes/L45_drivers.md) [PNG](gallery/layouts/L45.png) | [Giao diện](images/reference-set/05_ui.png) | Học vùng/callout; không coi UI mô phỏng là screenshot thật hay dùng số mẫu. |
| G07 Giải thích & khám phá | [L08](layouts/archetypes/L08_case.md) [PNG](gallery/layouts/L08.png) · [L13](layouts/archetypes/L13_document.md) [PNG](gallery/layouts/L13.png) · [L14](layouts/archetypes/L14_ui.md) [PNG](gallery/layouts/L14.png) · [L32](layouts/archetypes/L32_storyboard.md) [PNG](gallery/layouts/L32.png) · [L36](layouts/archetypes/L36_fishbone.md) [PNG](gallery/layouts/L36.png) · [L39](layouts/archetypes/L39_persona.md) [PNG](gallery/layouts/L39.png) | [Tài liệu](images/reference-set/04_document.png), [Giao diện](images/reference-set/05_ui.png) | Học chú giải/scene; không bịa schema, persona hay tính năng. |
| G08 Thực hành & ứng dụng | [L09](layouts/archetypes/L09_exercise.md) [PNG](gallery/layouts/L09.png) · [L18](layouts/archetypes/L18_wave.md) [PNG](gallery/layouts/L18.png) · [L41](layouts/archetypes/L41_scorecard.md) [PNG](gallery/layouts/L41.png) · [L46](layouts/archetypes/L46_mistakes.md) [PNG](gallery/layouts/L46.png) · [L47](layouts/archetypes/L47_teach.md) [PNG](gallery/layouts/L47.png) · [L48](layouts/archetypes/L48_actionplan.md) [PNG](gallery/layouts/L48.png) | [R05](images/user-infographics/R05_4.3.png), [R07](images/user-infographics/R07_5.3.png) | Học nhịp hành động; không tự gán người, deadline hoặc hiệu quả. |

## I01–I12 — infographic minh họa

| ID | Dùng khi / cấu trúc nền | Preview | Ảnh thật phải mở | Học / không học |
|---|---|---|---|---|
| [I01](layouts/infographics/I01_cycle_gate.md) | Vòng lặp có kiểm duyệt; L12/L19 | [PNG](gallery/infographics/I01.png) | [R01](images/user-infographics/R01_1.4.png), [R06](images/user-infographics/R06_5.2.png) | Học vòng, icon, nhấn gate; không lấy chữ/claim miễn nhiễm lỗi. |
| [I02](layouts/infographics/I02_illustrated_steps.md) | Bốn bước có hình; L05 | [PNG](gallery/infographics/I02.png) | [R05](images/user-infographics/R05_4.3.png) | Học badge/icon; không lấy body và chân trang lặp. |
| [I03](layouts/infographics/I03_three_stages.md) | Ba chặng; L02/L16 | [PNG](gallery/infographics/I03.png) | [R07](images/user-infographics/R07_5.3.png) | Học bệ và mũi tên; không lấy song ngữ/claim hiệu quả. |
| [I04](layouts/infographics/I04_approval_steps.md) | Năm bước có điểm duyệt; L05/L42 | [PNG](gallery/infographics/I04.png) | [R05](images/user-infographics/R05_4.3.png) | Học nhịp và gate; không tự thêm bước hoặc quyền. |
| [I05](layouts/infographics/I05_document_flow.md) | Hồ sơ đến sản phẩm; L17 | [PNG](gallery/infographics/I05.png) | [Tài liệu](images/reference-set/04_document.png) | Học input/output; không bịa schema hoặc automation. |
| [I06](layouts/infographics/I06_handoff.md) | Người–AI handoff; L22 | [PNG](gallery/infographics/I06.png) | [R03](images/user-infographics/R03_2.1.png) | Học phân vai; không coi mô hình là đặc tả sản phẩm. |
| [I07](layouts/infographics/I07_pillars.md) | Năm trụ; L07/L10 | [PNG](gallery/infographics/I07.png) | [R04](images/user-infographics/R04_4.2.png) | Học mái–trụ–nền; không biến trụ thành quy trình. |
| [I08](layouts/infographics/I08_illustrated_layers.md) | Ba tầng; L07 | [PNG](gallery/infographics/I08.png) | [R03](images/user-infographics/R03_2.1.png) | Học lớp/icon; không lấy tên tool/facts. |
| [I09](layouts/infographics/I09_maturity.md) | Bốn mức trưởng thành; L16 | [PNG](gallery/infographics/I09.png) | [R02](images/user-infographics/R02_1.5.png) | Học bậc và governance bar; không lấy phần trăm. |
| [I10](layouts/infographics/I10_illustrated_hub.md) | Lõi + ba hệ hỗ trợ; L11 | [PNG](gallery/infographics/I10.png) | [R03](images/user-infographics/R03_2.1.png) | Học hub/spokes; không sao chép hệ thống riêng. |
| [I11](layouts/infographics/I11_before_after.md) | Trước–sau; L31/L06 | [PNG](gallery/infographics/I11.png) | [R07](images/user-infographics/R07_5.3.png) | Học chuyển trạng thái; không tự gắn lợi ích. |
| [I12](layouts/infographics/I12_four_cards.md) | Bốn năng lực; L10/L03 | [PNG](gallery/infographics/I12.png) | [R04](images/user-infographics/R04_4.2.png), [R05](images/user-infographics/R05_4.3.png) | Học card/icon; không sao chép nội dung nghiệp vụ. |

## Registry và gallery

- Máy đọc: [registry L](layouts/archetypes/registry.json), [registry I](layouts/infographics/registry.json), [groups](layouts/taxonomy/groups.json), [facets](layouts/taxonomy/facets.json).
- Duyệt toàn thư viện: [gallery HTML](gallery/index.html), [group previews](gallery/groups/).
- Ảnh mẫu khác: [reference set](images/reference-set/) và [user-infographics registry](images/user-infographics/registry.json).
- Nguồn lịch sử nằm trong [sources](sources/), không thuộc đường đọc bình thường.